Bootstrap，使布局具有响应性的变化

Question

我正在使用基于响应式设计的 Twitter Bootstrap 布局，并且即将使其响应式。考虑以下网格：

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

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

- C. E.

Answer 1

使用 Bootstrap 2.0.2 或更高版本，您可以：

将 HTML 更改为：

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

（我将“更小的屏幕”解释为平板电脑和手机尺寸，您可以根据其他尺寸使用自己的定义）

对于较小的屏幕，.hidden-phone和.hidden-tablet会隐藏span4。

要重新调整span8并恢复该空间，请在您的css中添加以下内容：

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

如果你正在使用less，你可以使用Bootstrap的网格mixin：

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

- Gert-Jan van de Streek

---

你能否建议如何更改显示内容？使用 hidden-phone 我可以隐藏该 div，但我如何用其他内容替换它呢？ - Legend

@Legend 你不能在它下面放一个 visible-desktop span4 吗？ - jlewkovich

@Gert-Jan van de Streek，你是怎么想出那些％值的？ - jlewkovich

我真的很喜欢你选择的名字，“span12-tablet”。它非常适合与其他Bootstrap类一起使用，如hidden-tablet、visible-tablet等。 - Spencer

在Sass中，.span12-tablet类会是什么样子？ - DevWL

Answer 2

使用媒体查询并设置任何最小/最大宽度，将 .span4 设置为 display: none;

然后，在隐藏 .span4 的宽度以下的所有内容中，将 .span8 添加到 .span12 的规则中，因为 Bootstrap 已经完成了所有这些工作，所以没有必要重复。代码如下：

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

（最后一段代码只是一个示例，但在bootstrap的脚手架中会有类似的内容。）希望这能帮到你 :) 编辑：这可能有效，我在bootstrap网站上使用开发工具测试过，看起来可以工作。同样，在媒体查询中：

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

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

}

- will

---

我宁愿使用Id而不是将display:none应用于.span4，但回答很好。+1 - baptme

设计中一直使用 span12/span8，用于侧边栏/子网格等。因此，我需要为该列应用ID，并使用媒体查询来表示“现在是span8”，“现在是span12”。只有在Bootstrap中，网格类是动态创建的，如~"span@{index}" { stuff }，对于各种索引（使用递归构造），因此它们实际上并不存在，我无法使用LESS将它们包含在我的ID定义中。这意味着我必须复制代码并基本上重新创建网格，我对此并不太满意。但是您的解决方案是有效的，谢谢。 - C. E.

我更新了我的解决方案，应该会更好一些，并且希望没有重复。 - will

Answer 3

如果使用Bootstrap 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中指定的任何其他span宽度。

这些更改的效果使得所有span宽度都为100％，导致iPad在纵向模式下始终使用1列流体模式。

- George Filippakos

---

嗨，非常喜欢这个答案，但如果您有3个span并且只想让其中一个span占用其余空间，该怎么做？ - user1278673

Answer 4

写如下所示

在手机设备中，这个div将会隐藏<div class="span4 hidden-phone"></div>

而这个div将会显示<div class="span8 visible-phone"></div>

更新

之前的答案适用于Bootstrap 2.3

现在市场上已经出现了Bootstrap 3...

因此我为新用户更新了答案→Bootstrap3

在手机设备中，这个div将会隐藏<div class="col-md-4 hidden-xs"></div>

而这个div将会显示<div class="col-xs-4 visible-xs"></div>

- asad raza

---

你不需要任何@media标签。 - asad raza

现在有hidden-lg、hidden-md、hidden-sm、hidden-sx。如果隐藏span4，则除非它是浮动的，否则span8是块状的。在这种情况下，应该是一个浮动div。因此，这种解决方案将无法按照这种方式工作。 - Sándor Tóth

Answer 5

这将是保持动态效果的最佳选择。在我的示例中，我将宽度设置为流式网格列宽度旁边的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;
            }
        }
    }
}

- Malte Schulze-Boeing

Answer 6

简述：使用第二个代码片段

Bootstrap是一个面向移动设备的框架，因此我将从最小的屏幕尺寸开始解释。 在任何断点/屏幕尺寸下，布局始终为12列宽。

从最小的断点（xs - extra small）开始，span4被隐藏，span8占据了所有宽度（即12列）。

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

我们还没有定义下一个更高断点被触发时的行为（sm / small / screen宽度超过767像素），所以我们将使 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 = medium）之间进行更改，则可以使用visible-md类，在中等和以上断点（>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>

- ono2012

Answer 7

我想到了一个小变化。

在 row-fluid 中添加 stack-tablet 类，可以使跨度在平板电脑宽度上堆叠，而不仅仅是在电话宽度上（bootstrap 默认）:

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

可以与display和hidden类一起使用。

- John

Answer 8

只是：

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

- Daniel Faria