如何使用 Twitter Bootstrap 做这个简单的响应式布局？答案

【问题标题】：How to do this simple Responsive Layout using Twitter Bootstrap?如何使用 Twitter Bootstrap 做这个简单的响应式布局？
【发布时间】：2018-04-13 23:42:17
【问题描述】：

请看这个：

[已删除]

当您调整浏览器的大小时，它会从一行 3 个框直接变为每行 1 个。有没有办法让每行先到 2，然后再到 1？

如果我决定使用 twitter bootstrap 响应式网格，有时我会使用其他 CSS 网格框架（例如某些限制为 960 像素宽的设计），我不确定我的布局选项是否受限。

【问题讨论】：

这是理所当然的，这是“响应式”的想法。认为你的例子做得很好。
开箱即用，引导程序不会这样做。要记住的是，在那个特定的断点处，响应式 css 并没有减少网格中的列数，它只是忽略了网格——而不是担心每个 row 每个 @ 中有多少空间987654323@ 元素应该占用，它只是将它们全部提升到width: 100%。通过添加一些您自己的 css 和媒体查询，尝试切换到每行 2 可能是可行的，但在引导程序内部执行可能有点繁琐。这是您真正需要的东西，还是只是您想要的东西？
@ZaidCrouch 谢谢，但不幸的是我这样做了，这就是设计的要求。
您将遇到的另一个问题是，即使您获得 2 列，它也无法正常工作，除非您每个引导程序有偶数列 row，如每行仍然是一个单独的block。这是a live example，这是来自大卫（优秀）答案的 jsfiddle 的修改版本。

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

我喜欢 Zaid 的警告，但如果你真的需要这样做，这里有一些东西可以帮助你开始：Live example 和 jsfiddle

随着您的页面布局变得更加复杂，并且随着您添加更多 Bootstrap 组件，您将不得不使用滚雪球将异常列表添加到自定义 CSS 中，因此保持简单可能会很好;)

祝你好运！

CSS

@media(min-width:481px) and (max-width:767px){

.row-fluid [class*="span"]{   /* for the above viewpoints, force spans to be 50% */ 
width:48.717948717948715%;

float:left;
}

.row-fluid .span12{    /* override so span12 is full width */
width:100%;
margin-right:0 !important;
}


.row-fluid [class*="span"]:first-child {
margin-left: 0;
 margin-right: 2.5109110747408616%;
}

.row-fluid [class*="span"]:last-child {
float:right;
}

}

【讨论】：

为什么.row-fluid [class*="span"]的宽度指定为width:48.717948717948715%;而不是50%
@ikartik90，这个问题与 Bootstrap 2.3 有关。如果您检查 Bootstrap 2.3 的 CSS 并搜索 .span6，您会看到宽度定义为 48.71...%。剩余的 1.29% 用于列之间的填充。这在当前的 Bootstrap 3 中发生了变化。如果您检查 CSS 并搜索 col-md-6，您会发现它现在确实定义为 50%。我希望这会有所帮助！