Question

我正在为我的设计使用流畅的Twitter Bootstrap布局，并且即将使其响应。考虑这样的网格：

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

隐藏span4的最佳方法是什么，让span8占据整个宽度，以便在屏幕变小时使用？

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

如果您正好少用，可以使用bootstrap的网格混合：

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

Answer 2

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

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

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

（最后一段代码只是一个例子，但在bootstraps脚手架中会有类似的东西。）

希望有所帮助：）

修改

这可以工作，我在bootstrap网站上使用开发工具测试它，它似乎工作。同样，在媒体查询中：

@media (min-width: 320px){ #special .span4 { display: none; } #special .span8 { float: none; width: auto; } }

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中指定的任何其他跨度宽度。

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

Answer 4

这将是保持动态的最佳选择。在我的示例中，我将宽度设置为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;
            }
        }
    }
}

Answer 5

像这样写

在手机设备中，此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>

Answer 6

TLDR：使用第二个代码段

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 /小/屏幕宽度超过767px）我们还没有定义行为，因此我们将span4作为span8宽度的三分之一（12列/ 3 = 4列）和<div class="row-fluid"> <div class="span4 hidden-xs col-sm-4"></div> <div class="span8 col-xs-12 col-sm-8"></div> </div>将采用宽度的其余部分（12-4 = 8列）

span4

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

进一步阅读：

如果你想在sm-md（md = medium）之间进行更改，那么我可能会使用visible-md类，它将在断点上显示<div class="row-fluid"> <div class="span4 visible-md col-md-4"></div> <div class="span8 col-xs-12 col-md-8"></div> </div>以及（> 992px）

struct  th_struct t_header = {
    .s_byte = 0x47,
    .t_e_indicator = 0,
    .p_u_s_indicator = 0,
    .t_priority = 0,
    .id = 0x00000493,
    .t_s_control = 0,
    .a_f_control = 1,
    .c_counter = 2 };

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

可以与显示和隐藏类一起使用。

Answer 8

只是：

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

Bootstrap，对布局进行响应式更改

8 个答案: