Question

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

当我将我的浏览器调整到尽可能小的尺寸（甚至是中途，实际上）以使css踢到列中时，而不是调整大小以适合4行图像的行，它只是变成一串图像就像这样：

Image example

这是我的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）..

＆＃34;如果在一行中放置了超过12列，则每组都有额外的列将作为一个单元包裹到一个新的行＆＃34;

Answer 2

我建议你看看at the doc。

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

连续，你应该只有12个数字。像4次col-md-3，或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-sm-3之外，您似乎还需要添加col-xs-3和col-md-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列不应该重新调整为单行

4 个答案: