Question

我在Twitter Bootstrap 3中遇到行和列的问题。我有5个图像，分为2行（第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和2，中等2-2-1。我该如何实现这一目标？我不知道如何处理我的第3栏，因为他仍然是第1排的一部分。这是用媒体查询完成的吗？

简而言之，当屏幕很大时，我希望连续有3张图像，当它的介质我希望连续有2张图像时，每行少于1张图像。

由于

Answer 1

划分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 - Use more than 12 columns in a row

Twitter Bootstrap 3列排序

1 个答案: