web-dev-qa-db-ja.com

Bootstrapグリッドシステムの列の最小幅

Bootstrap CSS。

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>

「最小幅」がないと、場合によっては2列目の幅が120ピクセル未満になり、「インスタンス名」が完全に表示されません。そのため、「最小幅」を追加し、その場合、行の幅は100％を超えます。最後の列は新しい行に折り返されます。

bootstrap=動的な列幅であり、ブラウザウィンドウのサイズを小さくしてもそのインスタンス名は消えません。このような動作を実現するにはどうすればよいですか？

csstwitter-bootstrapresponsive-designgrid-layout
20
sasha_trn

あなたが望むものを達成するような方法があるかどうかはわかりません。

col-sm-xは、ビューポートの特定の幅の割合を定義します。カスタム値を指定すると、すべての列の累積幅が100％を超えるか、または100％未満になりますが、これは望ましい動作ではありません。

代わりに、同じdivに複数のクラスを提供できます。例：

<div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

これで解決できない場合は、他のdivの幅を手動で設定する何らかのjavascriptソリューションが考えられます。

以前にstackoverflowでここに投稿された別の同様の質問があるようです。ご覧ください こちら 。

W3Schools上のブートストラップグリッド

13
Chris

ブートストラップ列はフレックスアイテムです。他の列が最小幅に達したときに縮小する列を決定する必要があります。

あなたの例では、最後の「Due date」を選択しました。これは通常、列-sm-7です。 col-sm-1に減らしますが、flex-growを指定し、ブートストラップのmax-widthプロパティを上書きする必要があります。

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div>
</div>

ここに私が作ったきれいなコードペンがあります： https://codepen.io/timar/pen/VQWmQq/

また、非固定列class = "col"を指定することもできますが、これはflex-growおよびmax-widthプロパティをオーバーライドする必要はありません。

7
Timar Ivo Batis

より小さな解像度で値を変更しようとしましたか？例えば

  <div class="col-lg-4 col-sm-4">Name</div>
  <div class="col-lg-1 col-sm-2">Instance name</div>
  <div class="col-lg-7 col-sm-6">Due date</div>

Bootstrapにはさまざまな画面サイズのオプションがあるため、チェックアウトすることをお勧めします。 http://getbootstrap.com/css/

6
Armin