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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:54:28  来源:igfitidea点击:

Bootstrap 3 grid, set 1 column size for all displays

twitter-bootstrapgridviewsize

提问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%。