ブートストラップ：応答スパン12の4つのspan3サムネイル

Question

span12 - span8 - 容器に4つのサムネイルを配置してみました。残念ながら最後の<li>は次の行に分割されますが、screensizeは4つのサムネイルすべてが1行に収まるようにします。

6倍速span2のような他の組み合わせと同じ行動を...

私はこの動作を示す小さなバイオリンを構築： http://jsfiddle.net/PnWjT/

この問題を解決するためにどのように任意の提案ですか？

Answer 1

あなたのレイアウトの問題は、あなたが不適切にブートストラップクラスを積み重ねているということです。そのため、あなたのレイアウトはあなたが望むように動作していません。あなたは流体コンテナのdiv、.container-fluidをスタックしようとしている

<div class="container"> 
    <div class="container-fluid"> .. </div> 
</div> 

ここで、固定されたコンテナのdiv内、.containerを、ひいては.container-fluid div要素を相殺：

は、例えばこれを取ります。これらの2つの包含divは、あなたが望むレイアウトをカプセル化し、お互いを積み重ねるのに使われることを意図していたので、1つしか使用しません。したがってここでは

<div class="span8"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
       ...... 

あなたはspan8のdiv内のdiv（.row-fluidコンテナ内幅100％）span12 div要素を積み重ねている（幅65.812 .row-fluid％以内）と：あなたのスタックと

もう一つの問題は、以下のとおりです。 span12 divがより小さなコンテナspan8 divをオーバーフローしていて、コンテンツの変更によるサイズ変更が適切に調整されていないため、コンテンツが右にプッシュされています。幅に応じてspan個のdivをスタックする必要があります。 span12/2 = span6, span4*2 = span8, span5 + span5 = span10など

ここには適切なスタックが再加工されたdemoがあります。サイドバーがspan4 divにあり、内容がspan8、span4 + span8 = span12であることに注意してください。独自のクラスを作成しない限り、span12以上になることはできません。