我用我的设计流体Twitter的引导布局和我即将使其响应。 考虑一个网格像这样：
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
什么是隐藏span4，让span8占据整个宽度，当屏幕变小所使用的最佳方法？
Answer 1:
使用具有设定的任何最小/最大宽度的媒体查询.span4到display: none;
然后，添加.span8的规则.span12下面你躲什么宽度一切.span4因为所有的工作是为你的引导已经完成，因此不需要重复。 它会是这个样子：
@media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
（代码最后一点仅仅是一个例子，但会有类似的东西在白手起家脚手架。）
希望帮助:)
编辑：
这可能是工作，我测试了它使用的引导网站开发工具，它似乎工作。 再次，在媒体查询：
@media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
Answer 2:
自举2.0.2及以上，您可以：
更改HTML到：
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
（我解释“小”与平板电脑和手机的大小，使用自己定义的其他尺寸）
.hidden电话和.hidden片剂隐藏小屏幕的span4。
为了收回该空间并重新跨度span8，添加到您的CSS：
@media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
如果你碰巧使用少，你可以使用自举的网格混入：
.span12-tablet {
@media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
Answer 3:
如果使用自举2.2.1，您可以：
更改HTML到：
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
现在它添加到你的CSS覆盖：
@media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
这也为你工作已在HTML中指定的任何其他跨宽。
这些变化的效果使得所有跨宽100％使iPad来在纵向模式下始终使用1列流体模式。
Answer 4:
这将是保持动态的最佳选择。 在我的例子，我有宽度为6列旁边fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);
float: left;
margin-left: @fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Answer 5:
像这样写
在电话设备这个div将隐藏<div class="span4 hidden-phone"></div>
和这个div将显示<div class="span8 visible-phone"></div>
更新
以前的答案为引导2.3
现在，引导3进来市场..
所以我更新我的新用户→bootstrap3答案
在电话设备这个div将隐藏<div class="col-md-4 hidden-xs"></div>
和这个div将显示<div class="col-xs-4 visible-xs"></div>
Answer 6:
TLDR：使用第二个代码片段
引导是移动第一框架，所以我会从最小的屏幕尺寸可达解释。 布局是总是12列宽无论断点/屏幕尺寸。
从最小的断点开始（XS -特小）时， span4是隐藏和span8通吃宽度（全部12列）
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
我们正在为下一个断点了被击中，我们还没有定义的行为尚未大功告成（SM /小/屏幕宽度超过767px），所以我们会让span4采取宽度的三分之一（12列/ 3 = 4列），并且span8将采取宽度的其余部分（12-4 = 8列）
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
上述假设你想要的变化对XS之间的变化发生 - SM断点。
延伸阅读：
如果你想SM-MD（MD =中等）之间的变化，然后我可能会使用可视-MD类将显示span4上断点媒体及以上（> 992px）
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
Answer 7:
我想出了一个小的变化。
添加stack-tablet类将row-fluid ，使跨度在平板宽度堆放，不仅在手机的宽度（引导默认）：
@media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
可与显示和hidden-类一起使用。
Answer 8:
只是：
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>
文章来源: Bootstrap, making responsive changes to layout
