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

注意：与流行观点相反，单个 row 中总计超过 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"

Answer 2

建议你看一下at the doc。

行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。

并且在一行中，您总共应该只有数字 12。比如 col-md-3 的 4 次，或者 2x4+2x2，等等

在你的情况下，可能是这样的。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<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 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
                </div>
    </div>
    <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-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 3

除了 col-md-3 之外，您似乎还需要添加 col-sm-3 和 col-xs-3 来处理较小尺寸的列。

检查此 bootply。

Answer 4

您正在使用类 "col-md-..." 这针对中型设备。要为较小的设备设置布局，请使用 "col-xs"

请注意，您可以同时使用 "col-xs-12 col-md-6" 将在小型设备上以 100% 宽度显示元素，在中型及以上设备上以 50% 宽度显示元素。

在bootstrap网格系统中，每行只有12列。您正在尝试每行仅使用 12 个。

查看 http://getbootstrap.com/css/#grid-example-basic

Bootstrap 列在不应该调整为单行时

Bootstrap columns re-sizing to single row when it shouldn't

html

css

twitter-bootstrap

twitter-bootstrap-3