Bootstrap 3 布局打破网格答案

【问题标题】：Bootstrap 3 layout to break out of gridBootstrap 3 布局打破网格
【发布时间】：2015-08-02 08:30:52
【问题描述】：

我对 Bootstrap 有一个小问题，我不知道如何解决。想象一下下面的 12 列布局：

<div class="container">
    ... several other row definitions...

    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
        <div class="col-xs-12">B</div>
        <div class="col-xs-12">C</div>
        <div class="col-xs-12">D</div>
        <div class="col-xs-12 col-sm-12">E</div>
    </div>

    ... several other row definitions...
</div>

在超小型设备 (xs) 上，这会将 A 到 E 放入全尺寸列：

| A |
| B |
| C |
| D |
| E |

这就是我想要的。

但在小型设备（sm）（以及任何较大的设备）上，我想将 B 到 D 排成一排，没有宽度，并打破网格：

| A |
| B C D |
| E |

这可以通过引导程序实现吗？感谢您的任何提示！

B,C,D 本身不应该有宽度（我可以通过设置 .col-sm-2 类将它们与宽度对齐，但我不希望它具有固定宽度），它们只应该在一起（作为一行）是全宽（12 列）。

【问题讨论】：

我想这是 bootstrap 4 启用 flexbox grid 的主要问题之一。使用 flexbox，只需将它们全部分配为 .col-sm 中的一个列即可。但是，我不确定所需的行为/您如何处理在大型显示器上最多为 12 的列。

标签： html css twitter-bootstrap-3

【解决方案1】：

一个解决方案 - 但我不推荐它：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">B</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">C</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">D</div>
        <div class="hidden-xs col-sm-12">B C D</div>
        <div class="col-xs-12 col-sm-12">E</div>
    </div>
</div>

另一个使用 Javascript 的解决方案：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
    </div>
    <div class="row break-sm">
        <div class="col-xs-12">B</div>
        <div class="col-xs-12">C</div>
        <div class="col-xs-12">D</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12">E</div>
    </div>
</div>

还有 Javascript（假设你使用 Jquery）：

$(document).ready(function() {
    $(window).resize(function() {
        if ($(this).width() < 768) {
            $('.break-sm').children('div').addClass('col-xs-12');
            $('.break-sm').children('div').removeClass('inline');
        } else {
            $('.break-sm').children('div').removeClass('col-xs-12');
            $('.break-sm').children('div').addClass('inline');
        }
    });
});

inline 类应该包含 display: inline-block; 之类的内容以及您想要的其他内容。

【讨论】：

我也想过类似的解决方案，但从 SEO 的角度来看，重复的内容并不好。但最后，这是一个可行的解决方案，谢谢。
是的，这就是我不推荐它的原因...您也可以使用 Javascript 并注意窗口调整大小事件。如果它变得比小型设备小，您可以更改 CSS 并应用您想要的样式 - 删除类左右。
刚刚加了一段代码，你的想法告诉我。
JS 也是一种方式，但我喜欢尽量减少 JS 的数量。我会坚持第一个。

【解决方案2】：

所以您希望 B、D、C 具有动态宽度，但总体上不超过 100%，对吗？我认为仅使用引导类是不可能的。为了制定可行的解决方案，我必须知道这 3 个 div 的宽度。

但是，您可以使用容器流体“打破网格”并将 3 col-sm-4 放入其中。像这样：

http://www.bootply.com/jpt7uAWOBJ

<div class="container">
    <div class="row">
        <div class="col-sm-12">A</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">B</div>
        <div class="col-sm-4">C</div>
        <div class="col-sm-4">D</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12">E</div>
    </div>

【讨论】：

感谢您的回答。这样就可以了，不幸的是我不能添加额外的容器 div，因为这会破坏外部布局。