Html Bootstrap 3 hidden-xs 使行更窄
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19987914/
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 3 hidden-xs makes row narrower
提问by branty1970
I'm experimenting with Bootstrap 3 responsive grids and am trying to make a column disappear from a row when the screen size is small. I can get the column to disappear but the whole row seems to get narrower as a result.
我正在尝试使用 Bootstrap 3 响应式网格，并试图在屏幕尺寸较小时使一列从一行中消失。我可以让列消失，但结果整行似乎变窄了。
Here's my code that is giving me grief:
这是我的代码，让我感到悲伤：
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col1
</div>
<div class="col-xs-4 col-sm-2" align="center">
Col2
</div>
<div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
Col3
</div>
<div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
Col4
</div>
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col5
</div>
</div>
</div>
The columns Col4 and then Col3 disappear as the screen gets smaller but the row gets narrower at each removal (when compared to a header row row that doesn't change). I don't get why as I've made sure all the blocks add up to a width of 12 for each stage of the process. I though that maybe the col-xs-12 was the problem but removing this stops the column being removed at all and puts the removed column in with Col5!
随着屏幕变小，列 Col4 和 Col3 消失，但每次删除时行都会变窄（与不改变的标题行相比）。我不明白为什么，因为我已经确保在过程的每个阶段所有块的宽度加起来都是 12。我虽然认为 col-xs-12 可能是问题所在，但删除它会完全停止删除列，并将删除的列与 Col5 放在一起！
I'm obviously missing 'something' but I can't find anything anywhere to help me - hopefully I will find enlightenment here.
我显然错过了“一些东西”，但我找不到任何可以帮助我的地方 - 希望我能在这里找到启示。
回答by Jimmie Johansson
How does it work if you only are using visible-md at Col4 instead? Do you use the -lg at all? If not this might work.
如果您只在 Col4 上使用 visible-md，它会如何工作？你使用 -lg 吗？如果没有，这可能会奏效。
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col1
</div>
<div class="col-xs-4 col-sm-2" align="center">
Col2
</div>
<div class="hidden-xs col-sm-6 col-md-5" align="center">
Col3
</div>
<div class="visible-md col-md-3 " align="center">
Col4
</div>
<div class="col-xs-4 col-sm-2 col-md-1" align="center">
Col5
</div>
</div>
</div>
回答by Business ideas
.row {
margin-right: 15px;
}
throw this in your CSS
把它扔到你的 CSS 中
