使用 Twitter Bootstrap 的响应式布局答案

【问题标题】：Responsive Layout with Twitter Bootstrap使用 Twitter Bootstrap 的响应式布局
【发布时间】：2012-09-21 06:51:24
【问题描述】：

我正在尝试使用引导程序构建响应式布局。我很困惑如何对下面的区域进行编码，以确保它可以自然地与引导程序一起工作。

根据 Twitter 约定，我已经在使用 div.row 和 div.span12。在这个区域内，我有一个带有边框的框，如下所示。

有一个带边框的盒子，在盒子里面我需要三个等宽的跨度。我如何使用引导程序来实现这一点。

【问题讨论】：

问题在哪里？你能解释一下你想要达到的目标吗？ “自然工作”不是很清楚。将span3 类应用于这三个元素中的每一个都对您有用吗？
@MaximeR。我正在使用一行 > span12 并在其中另一个 div#stats-chart 来实现该框。现在我必须添加三个宽度相等的 div。如果我添加另一个行和跨度，它会给我一个完整的框外宽度
你的意思是说 row>span12>row>span4+span4+span4 ?
一个解决方案display: table：stackoverflow.com/q/5351634/343834，如果你想要3个等宽的div无论如何。当窗口宽度减小时，Bootstrap 的跨度将在另一个之上。
听起来你应该看看 .row-fluid

【解决方案1】：

使用display: table 可以获得等宽的div：CSS side by side div's auto equal widths 然后无论如何你都会有 3 个等宽的 div。

当窗口宽度减小时，Bootstrap 的跨度将在另一个之上，但这可能比智能手机上三个相同宽度的小 div 更好。

另外，您可以根据需要利用引导程序的responsive utility classes 设计不同的图表标题。

【讨论】：