html - Bootstrap 列在不应该调整大小为单行时

Question

我正在自学如何使用 Bootstrap 列，遇到了一个小问题。

当我将我的浏览器调整到尽可能小的尺寸(甚至是一半，真的)以使 css 在列中踢时，而不是调整大小以适应行的 4 个图像，它只是变成一个图像字符串，就像这样:

这是我的 html，我使用的是 bootstrap 3。如有任何帮助，我们将不胜感激。

<section class="container" style="padding-bottom: 60px;">
    <div class="row">

        <div class="col-md-6">
            <h2>Passion, precision and simplicity</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Maecenas metus nulla, 
                commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor 
                convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
                metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, 
                sodales tempor convallis et, iaculis ac massa.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, 
                <strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque. 
                Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
                dignissim pretium nunc. Nam et <a href="#">lacus neque</a>. Ut enim massa, sodales tempor convallis 
                et, iaculis ac massa.
            </p>

            <!-- divider -->
            <div class="divider styleColor">
                <i class="fa fa-leaf"></i>
            </div>

            <!-- brands -->
            <div class="row">
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div>
                <img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
            </div>
        </div>
    </div>
</section>

Answer 1

使用col-sm-* 等较小的断点，使垂直堆叠发生在较窄的宽度处。或者，您可以使用 col-xs-* 使列永不堆叠。

http://bootply.com/4JKga3vGjl

注意:与流行观点相反，单个行中的列总数超过 12 个单元没有问题。它只是使行换行。来自文档(http://getbootstrap.com/css/#grid)..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"