Css 引导，对布局做出响应性更改

我正在为我的设计使用一个流畅的推特引导布局，并准备使其具有响应性。考虑这样的网格：

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

---

当屏幕变小时，隐藏span4并让span8占据整个宽度的最佳方法是什么？

使用媒体查询，将最小/最大宽度设置为

。span4

至

显示：无

然后，将
.span8
添加到
.span12
规则中，用于隐藏
.span4
宽度以下的所有内容，因为所有这些工作都已通过引导为您完成，因此无需重复。它看起来像这样：

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

（最后一段代码只是一个示例，但在引导脚手架中也会有类似的内容。）

希望有帮助：）

编辑：

这是可行的，我在bootstrap站点上使用dev工具对其进行了测试，结果似乎是可行的。同样，在媒体查询中：

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}

使用bootstrap 2.0.2及更高版本，您可以：

将html更改为：

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

如果使用较少，则可以使用bootstrap的网格混合：

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}

如果使用bootstrap 2.2.1，您可以：

将html更改为：

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

这也适用于您在html中指定的任何其他跨度宽度。

这些变化的效果使所有跨度宽度都达到100%，导致iPad在纵向模式下始终使用一栏流体模式。
我想出了一个小小的变化

将
堆叠平板电脑
类添加到
行流体
以使跨度堆叠在平板电脑宽度上，而不仅仅是手机宽度上（引导默认值）：

可以与显示类和隐藏类一起使用。
这是保持动态的最佳选择。在我的示例中，我将fluidGridColumnWidth旁边的宽度设置为6列

[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;
            }
        }
    }
}

这样写

在电话设备中，此div将隐藏

这个div将显示

更新

Bootstrap 2.3的上一个答案

现在Bootstrap3进入市场

所以我为新用户更新了我的答案→ bootstrap3

在电话设备中，此div将隐藏

这个div将只显示以下内容：

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>

TLDR：使用第二个代码段

Bootstrap是一个移动优先的框架，所以我将从最小的屏幕大小开始解释。无论断点/屏幕大小如何，布局始终为12列宽

从最小的断点（xs-超小）开始，
span4
被隐藏，
span8
占据所有宽度（全部12列）

以上假设您希望更改发生在xs-sm断点之间的更改上

进一步阅读：

如果您想要在sm-md（md=medium）之间进行更改，那么我可能会使用一个类，该类将在中上（>992px）断点上显示
span4
）


我宁愿使用一个Id而不是应用显示：在.span4上没有，但答案很好+1窗格12/span8用于整个设计，如侧栏/子网格等。因此，我需要对该列应用一个ID，并使用媒体查询说“now be span8”，“now be span12”。只有在Bootstrap中，网格类才会像~“span@{index}{stuff}一样为各种索引动态创建（使用递归构造），因此它们实际上并不存在，我不能用更少的代码将它们包含在我的ID定义中。这意味着我必须复制代码并重新创建网格，我对此不太满意。但是你的解决方案是可行的，谢谢。我已经更新了我的解决方案，应该更好一点，希望没有重复。嘿，真的很喜欢这个答案，但是如果你有3个跨度，你只想在其中一个跨度占用剩余空间时使用它呢？你不需要任何@media标记现在有隐藏lg、隐藏md、隐藏sm、隐藏sx。此外，如果隐藏span4，并且span8是块，除非它是浮动的。在这种情况下，它应该是一个float div。因此，此解决方案不会以这种方式工作。您还可以建议如何更改显示的内容吗？通过使用
hidden phone
我无疑可以隐藏该div，但我如何用其他东西替换它呢？@Legend你能不能在它下面有一个
可见的桌面span4
？@Gert Jan van de Streek你是如何得出这些%值的？我真的很喜欢你选择的名字，“span12平板电脑”非常适合其他引导类，如隐藏平板电脑、可见平板电脑等。span12平板电脑类如何查找sass？
<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>

<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>

<div class="row-fluid">
    <div class="span4 hidden-xs col-sm-4"></div>
    <div class="span8 col-xs-12 col-sm-8"></div>    
</div>

<div class="row-fluid">
    <div class="span4 visible-md col-md-4"></div>
    <div class="span8 col-xs-12 col-md-8"></div>    
</div>