CSS Bootstrap，对布局进行响应式更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11037517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap, making responsive changes to layout
提问by C. E.
I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
我正在为我的设计使用流畅的 Twitter Bootstrap 布局，并将使其具有响应性。考虑这样的网格：
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
隐藏span4并让span8占据整个宽度的最佳方法是什么，以便在屏幕变小时时使用？
采纳答案by will
Using a media query with whatever min/max width set .span4to display: none;
使用最小/最大宽度设置.span4为的媒体查询display: none;
Then, add .span8to the rule for .span12for everything below whatever width you hide .span4as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
然后，将所有低于您隐藏的宽度的所有内容添加.span8到规则中，.span12因为.span4引导程序已经为您完成了所有工作，因此无需重复。它看起来像这样：
@media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
（最后一点代码只是一个例子，但在引导脚手架中会有类似的东西。）
Hope that helps :)
希望有帮助:)
EDIT:
编辑：
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
这可以工作，我使用引导站点上的开发工具对其进行了测试，它似乎有效。同样，在媒体查询中：
@media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
回答by Gert-Jan van de Streek
With bootstrap 2.0.2 and up you can:
使用 bootstrap 2.0.2 及更高版本，您可以：
Change the html to:
将 html 更改为：
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
（我用平板电脑和手机尺寸解释“更小”，对其他尺寸使用您自己的定义）
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
.hidden-phone 和 .hidden-tablet 隐藏了小屏幕的 span4。
To reclaim that space and re-span the span8, add this to your css:
要回收该空间并重新跨越 span8，请将其添加到您的 css 中：
@media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
If you happen to be using less you can use bootstrap's grid mixins:
如果您碰巧使用较少，则可以使用引导程序的网格混合：
.span12-tablet {
@media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
回答by George Filippakos
If using bootstrap 2.2.1 you can:
如果使用引导程序 2.2.1，您可以：
Change the html to:
将 html 更改为：
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
现在将其添加到您的 css 覆盖中：
@media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
这也适用于您在 html 中指定的任何其他跨度宽度。
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
这些更改的效果使所有跨度宽度为 100%，从而导致 iPad 在纵向模式下始终使用 1 列流体模式。
回答by Malte Schulze-Boeing
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
这将是保持动态的最佳选择。在我的示例中，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;
}
}
}
}
回答by asad raza
Write Like this
像这样写
in phone device this div will hide<div class="span4 hidden-phone"></div>
在电话设备中，此 div 将隐藏<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
这个 div 将显示 <div class="span8 visible-phone"></div>
Update
更新
Previous Answer for Bootstrap 2.3
Bootstrap 2.3 的上一个答案
Now bootstrap 3 come in market..
现在 bootstrap 3 上市了..
so i update my answer for new user → bootstrap3
所以我更新了我对新用户的回答 → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
在电话设备中，此 div 将隐藏<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
这个 div 将显示 <div class="col-xs-4 visible-xs"></div>
回答by ono2012
TLDR: Use the 2nd code snippet
TLDR：使用第二个代码片段
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Bootstrap 是一个移动优先的框架，所以我将从最小的屏幕尺寸开始解释。无论断点/屏幕大小如何，布局始终为 12 列宽。
Starting from the smallest breakpoint (xs - extra small), the span4is hidden and the span8takes all of the width (all 12 columns)
从最小的断点（xs - 超小）开始，span4隐藏并span8占据所有宽度（所有 12 列）
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4take a third of the width (12 columns/3 = 4 columns) and the span8will take the rest of the width (12-4= 8 columns)
我们还没有完成，因为我们还没有定义下一个向上断点时的行为（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>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
以上假设您希望更改发生在 xs - sm 断点之间的更改上。
Further reading:
进一步阅读：
If you wanted the change between sm-md (md = medium) then I might use the visible-mdclass which will show the span4on breakpoints medium and up (>992px)
如果您想要在 sm-md (md = medium) 之间进行更改，那么我可能会使用visible-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>
回答by Daniel Faria
just:
只是：
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>
回答by John
I came up with a small variation of that.
我想出了一个小的变化。
Add stack-tabletclass to a row-fluidto make the spans stack on tablet width, not only on phone width (bootstrap default):
将stack-tablet类添加到 arow-fluid以使跨度在平板电脑宽度上堆叠，而不仅仅是在手机宽度上（引导程序默认）：
@media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
可以与 display- 和 hidden- 类一起使用。
