6個のアイコンの上に6個のテキストの行を配置して、最初のテキストが最初のアイコンの上に表示されるようにしようとしています。私はここに新しいので、画像を投稿しないでください。div内のアイテムを他のdivの中央に配置
<div id="forecast">
<!-- Naming convention starts with today as Sunday, because reasons -->
<div id="names" class="row">
<div id="mon" class="col-md-2"> Mon </div>
<div id="tues" class="col-md-2"> Tues </div>
<div id="wed" class="col-md-2"> Wed </div>
<div id="thur" class="col-md-2"> Thur </div>
<div id="fri" class="col-md-2"> Fri </div>
<div id="sat" class="col-md-2"> Sat </div>
</div>
<!-- End of names -->
<div id="forecast-icons" class="row">
<div id="mon-icon" class="col-md-2"> </div>
<div id="tues-icon" class="col-md-2"> </div>
<div id="wed-icon" class="col-md-2"> </div>
<div id="thur-icon" class="col-md-2"> </div>
<div id="fri-icon" class="col-md-2"> </div>
<div id="sat-icon" class="col-md-2"> </div>
</div>
<!-- forecast icons -->
ブートストラップは、アイコンには影響しない、と私はなぜわからない:ここでは
はHTMLです。これに対処するために、私はpadding-left:をパーセンテージと生の数字の両方で追加しようとしましたが、それらは機能しませんでした。生の数字はできますが、STUPID量のブレークポイントが必要です。
私も試しました:#names、#forecast-icons {display:flex;屈曲方向:行; justify-content:center; }
しかし、アイコンはすべて中央に集まっていました。 https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100
をそしてここで、フルページビューです:
https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100
私はそれらすべてを持っている行のことではここ
はcodepen(私は、申し訳ありませんここにjsfiddleのような人を知っている)へのリンクです表示を適用する:それらのすべてにインライン。あなたがテーブルにあなたの見通しの名前とアイコンを置くことを試みることができる
は、ここで私が求めるしようとしているものの画像へのリンクです:http://i.imgur.com/tX7Tf4c.png – CrumrineCoder
は、アイコンではない問題であり、中心?ブートストラップの列は動作しています。 – Toby
あなたは 'col-md- *'を使用しています。これは992ピクセル以上の画面にのみ適用されます。あなたがそれを知っていたかどうかはわかりません。 – Toby