twitter-bootstrap - レスポンシブ デザインのために div 内で要素を等間隔に配置する

Question

div 内に 4 つの要素があり、使用可能なスペースに均等に配置したいと考えています。この場合、レスポンシブ デザインのベスト プラクティスと見なされる手法はどれですか?

各要素について、私は以下を使用しています:

height: 75px;
width: 75px;
border-radius: 50%;
margin-right: 20px;

JS フィドル: http://jsfiddle.net/adnanymous/9yYZJ/

Answer 1

div.row-fluidすでにブートストラップを使用しているため、4 つの項目を含む必要がある div 内に挿入するだけです。これら 4 つの項目をそれぞれ でラップしdiv.span3ます。これにより、幅が 767px (bootstrap の電話サイズ) になるまで間隔が自動的に調整され、その時点ですべてが垂直にスタックされます。これにより、余分なライブラリを追加する必要がなくなり、JavaScript が有効になっていない場合でも機能します。

<div class="row-fluid">
  <div class="span3">Thing1</div>
  <div class="span3">Thing2</div>
  <div class="span3">Thing3</div>
  <div class="span3">Thing4</div>
</div>

Answer 2

フレックスボックス ( http://dev.w3.org/csswg/css-flexbox/ ) は、現在のブラウザー サポート ( http://caniuse.com/flexbox ) とその必要性を受け入れることができる場合、まさにあなたが望むことを行います。ベンダープレフィックスを使用します。あなたの場合、次のようなものです：

#my-div {
    display: -webkit-flex;        
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-between; /* flush against edges */
    -webkit-justify-content: flex-around;  /* space at left/right */
}

.elt {
    -webkit-flex: none; /* do not grow and shrink items */
    height: 75px;
    width: 75px;
    border-radius: 50%;
    margin-right: 20px;
}

これらは本質的にレスポンシブです。確かに不安定な jQuery プラグインよりも優れています。