0

Twitter Bootstrap 3 の行と列に問題があります。2 行に設定された 5 つの画像を取得しました (1 行目に 3 つ、2 行目に 2 つ)。それらは、col-lg-4 (連続する 3 つの画像) として設定されます。

<div class="row pad3">

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/logodtll.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/sclogonew.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/biclogonew.png" alt="" />

                  </a>

            </div>

        </div>

        <div class="row pad3">

            <div class="col-lg-4 col-xs-12 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/adrislogo2.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 col-xs-12 desctext">

                  <a href="#demo">

                    <img class="imgmargin" src="css/img/collection2.png" alt="" /> 

                  </a>

            </div>

        </div>

ウィンドウのサイズを小さくすると、それらの列が中 (col-md-6) になり、3 番目の列が次の行に「こぼれ」ます。大画面では 3 と 2、中画面では 2-2-1 のようなものです。どうすればこれを達成できますか? 彼はまだ 1 列目にいるので、3 列目をどうしたらよいかわかりません。これはメディアクエリで行われますか?

要するに、画面が大きい場合は3つの画像を連続して表示したいのですが、中程度の場合は2つの画像を連続して表示したいのですが、それよりも小さい画像は行ごとに1つの画像が表示されます。

ありがとう

4

1 に答える 1

0

分割rowにより、列の折り返し (「スピルオーバー」) が防止されます。これを試して..

<div class="row pad3">
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/logodtll.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/sclogonew.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/biclogonew.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/adrislogo2.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#demo">
            <img class="imgmargin" src="css/img/collection2.png" alt="">
        </a>
    </div>
</div>

デモ: http://bootply.com/93649

参照: Bootstrap 3 - 行に 12 を超える列を使用する

于 2013-11-12T15:01:35.740 に答える