0

我在 Twitter Bootstrap 3 中遇到了行和列的问题。我得到了 5 张图像，它们被设置为 2 行（第一行 3 个，第二行 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 和 2，中屏幕上的 2-2-1。我如何实现这一目标？我不知道如何处理我的第三列，因为他仍然是第一行的一部分。这是通过媒体查询完成的吗？

简而言之，当屏幕很大时，我希望连续显示 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 回答