13

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

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

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

4

8 回答 8

24

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

如果您碰巧使用较少，则可以使用引导程序的网格混合：

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}
于 2012-10-01T15:56:26.627 回答
13

使用任何最小/最大宽度设置.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;
    }

}
于 2012-06-14T16:42:51.610 回答
6

如果使用引导程序 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 列流体模式。

于 2012-11-04T08:46:33.770 回答
3

这将是保持动态的最佳选择。在我的示例中，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;
            }
        }
    }
}
于 2013-02-15T14:35:59.777 回答
3

像这样写

在电话设备中，此 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>

于 2013-06-27T12:07:05.117 回答
3

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/small/screen 宽度超过 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 = medium) 之间进行更改，那么我可能会使用visible-md类，该类将显示span4on 断点 medium 和 up (>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>
于 2016-12-19T11:22:51.180 回答
0

我想出了一个小的变化。

将stack-tablet类添加到 arow-fluid以使跨度在平板电脑宽度上堆叠，而不仅仅是在手机宽度上（引导程序默认）：

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

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

于 2013-02-07T12:36:47.313 回答
0

只是：

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
于 2013-07-15T00:58:32.770 回答