Question

所以我有一排有2或3个不同的col。我希望它像在这个网站上一样：http://wrapbootstrap.com/preview/WB0196957 特色。有3个带有文字的图像，当我最小化我的浏览器时，它们将在每个图像下对齐，而不是每个图像。

那我该怎么做？

我尝试过这样但是当我最小化浏览器时这不起作用，因为事情将重叠，因为它们在一行中。

<div class="container dates-sub">
    <div class="row">
        <div class="col-md-4">
            <span class="day-sub">28</span>
            <span class="month-sub">09</span>
            <span class="year-sub">2015</span>
        </div>
        <div class="col-md-offset-2 col-md-4">
            <span class="day-sub">30</span>
            <span class="month-sub">10</span>
            <span class="year-sub">2015</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
                <p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">Benefit-Gala</h3>
                <p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea. At vero eos et accusam et ju-
                    sto duo dolores etea clita kasd gubergren, no s-
                    ea takimata sandaipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

目前，您正在使用这些布局：

4 / (+2)4代表第一行（.col-md-4 + .col-md-offet-2.col-md-4）
6 / 6代表第二行（.col-md-6 + .col-md-6）

你需要了解一些关于Bootstrap的事情：

md表示“中等”（即设备大于992像素，且小于1200像素）
Bootstrap首先移动，这意味着它会首先尝试渲染e x tra- s 商城布局，然后 sm 全部，然后 m e d ium，然后 l ar g e。
如果没有使用任何列类，Bootstrap将使用12列类。

这意味着您没有为 extra-small 和 small 设备设置任何列类。在这种情况下，Bootstrap将它们渲染为12列元素，这说明它们占据了整行。

要让您的布局适用于每个设备，您需要尽可能使用最小的列类.col-xs-xx：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container dates-sub">
    <div class="row">
        <div class="col-xs-4">
            <span class="day-sub">28</span>
            <span class="month-sub">09</span>
            <span class="year-sub">2015</span>
        </div>
        <div class="col-xs-offset-2 col-xs-4">
            <span class="day-sub">30</span>
            <span class="month-sub">10</span>
            <span class="year-sub">2015</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="blog-title">
                <h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
                <p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea.</p>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="blog-title">
                <h3 class="blog-heading">Benefit-Gala</h3>
                <p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea. At vero eos et accusam et ju-
                    sto duo dolores etea clita kasd gubergren, no s-
                    ea takimata sandaipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Answer 2

我没有看到您尝试放置图片的位置，但只要您将它们放在像这样的“缩略图”类<div class="thumbnail"><img src="..."></div>中，它们就不应重叠。

应用col-xs-6 col-md-12 and将标题的顶部/底部方向更改为左/右。

查看示例：http://www.bootply.com/h6STovl9Qq

Answer 3

请阅读bootstrap文档

http://getbootstrap.com/css/

如果你想强制元素看起来像在大屏幕上一样，你必须添加其他响应类这样的

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>

或者，如果你使用更少，你可以做这样的事情

.my-class{
 .make-lg-column(6);
 .make-md-column(6);
 .make-sm-column(6);
 .make-xs-column(6);
}

<div class="my-class">Hello</div>

Bootstrap 3响应col连续 - 如何？

3 个答案: