twitter-bootstrap Bootstrap 3 网格,为所有显示器设置 1 列大小
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21482753/
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 grid, set 1 column size for all displays
提问by BrownChiLD
In bootstrap v3, the column sizes are declared for different screen sizes..
在 bootstrap v3 中,为不同的屏幕尺寸声明了列尺寸。
<div class='container'>
<div class='row'>
<div class='col-md-6 col-lg-6 col-sm-6'>
I often find myself just needing 1 size for all display types.. and i thought this would be something like
我经常发现自己只需要 1 种尺寸的所有显示类型.. 我认为这会是这样的
<div class='col-6'>
where no matter what display size the user is on, just keep the width of the column 6/12 of the grid system.. but this doesn't seem to work. What am I missing?
无论用户使用什么显示尺寸,只需保持网格系统第 6/12 列的宽度.. 但这似乎不起作用。我错过了什么?
回答by ZAD-Man
The correct answer for thosesizes is <div class='col-sm-6'>. This will apply to smand everything larger than it.
这些尺寸的正确答案是<div class='col-sm-6'>。这将适用于sm所有比它更大的东西。
However, there is a fourth size - xs- so using <div class='col-xs-6'>would apply to every possible size.
但是,还有第四种尺寸——xs因此使用<div class='col-xs-6'>将适用于所有可能的尺寸。
回答by James
I haven't tested this so it may be wrong. I remember having an issue with col-lg-8working but when the screen got to medium it all changed. Changing the class to col-md-8then worked for both.
我没有测试过这个,所以它可能是错误的。我记得在col-lg-8工作时遇到了问题,但是当屏幕调到中等时,一切都变了。将班级更改为col-md-8然后对两者都有效。
Using that logic, try setting the class to the smallest you want and see it it inherits upwards.
使用该逻辑,尝试将类设置为您想要的最小类,并查看它向上继承。
回答by AndreFontaine
Have you try just: <div class="col-md-6">? Because I think there's not a class col-6 in bootstrap.
你有没有试过:<div class="col-md-6">?因为我认为引导程序中没有 col-6 类。
回答by ThatsRight
The prefix xs/sm/md/lg are at wich breakpoints the element snaps to full width. You can see the breakpoints here: http://getbootstrap.com/css/#grid
前缀 xs/sm/md/lg 位于元素捕捉到全宽的断点处。你可以在这里看到断点:http: //getbootstrap.com/css/#grid
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
So you should be able to use col-xm-6, as it has no breakpoint, or you could make your own class which has 50% width.
所以你应该能够使用 col-xm-6,因为它没有断点,或者你可以创建自己的类,宽度为 50%。

