web-dev-qa-db-ja.com

Bootstrapグリッドレスポンシブブレーク行

私は現在bootstrapグリッドシステムで作業していて、次の問題が発生しました：

>タブレットの場合、4列にスタックするコンポーネントを取得しました。 <タブレットの場合は2列。一部のコンポーネントにはリンクがあり、一部にはリンクがありません。

        <div class="col-xs-6 col-md-3">
            <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
          <div class="iconname">Test1</div>
          <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
          <div class="align-left"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
        </div>

http://jsfiddle.net/0q346dde/

これは正常に機能しますが、幅が440pxから485pxの間では、次のリンクがあります。> ABCDE TEST1 PRODUCTSは、スペースがなくなったため、ブレーク行を取得します。これは、> ABCDE TES PRODUCTSの2番目のリンク（ラベルの文字数が少ない）が中断するまで発生します。

ここで、「空白：nowrap;」を設定しようとしました。リンク上にありますが、互いにオーバーラップしているため、400px未満では見栄えがよくありません。

誰でも私を助けることができますか？

csstwitter-bootstrapgridline-breaksdynamic-columns
4
Fl0R1D3R

あなたの場合、画面サイズが小さくなるとtest3アイコンの上のdivの高さが増加するので、要件に応じてそのdivの高さを固定する必要があります。例えば。

Css：

.test {
     height: 40px;
}

HTML：

<div class "row">
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test1</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test2</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test3</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test4</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
</div>
4
J Prakash

この種の動作を防ぐために、グリッドブロックをフローティングからインラインブロックに変更することがあります。列間のすべての空白をクリアすることを忘れないでください。そうしないと、レイアウトが壊れます（ http://css-tricks.com/fighting -the-space-between-inline-block-elements / ）。

.row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

次に、.inline-blockクラスを行に追加するだけです。

ここにフィドルがあります： http://jsfiddle.net/0q346dde/2/

4
Dax

各行のdivクラスでコンテナrowを使用する必要があります。このようにして、フロートがクリアされていることを確認します。

だからあなたは持っているでしょう：

<div class="row">
    <div class="col-xs-6 col-md-3"></div>
    <div class="col-xs-6 col-md-3"></div>
</div>

これが更新されたフィドルです

1
Caelea