Question

在bootstrap v3中，声明了不同屏幕尺寸的列大小。

<div class='container'>
    <div class='row'>
        <div class='col-md-6 col-lg-6 col-sm-6'>

我经常发现自己只需要1种尺寸的所有显示类型..我认为这就像

        <div class='col-6'>

无论用户使用什么显示尺寸，只需保持网格系统列6/12的宽度..但这似乎不起作用。我错过了什么？

Answer 1

这些尺寸的正确答案是<div class='col-sm-6'>。这适用于sm以及大于它的所有内容。

但是，第四种尺寸 - xs - 因此使用<div class='col-xs-6'>将适用于所有可能的尺寸。

Answer 2

我没有测试过，所以可能是错的。我记得col-lg-8有问题，但是当屏幕达到中等状态时，一切都改变了。将班级更改为col-md-8然后为两者工作。

使用该逻辑，尝试将类设置为您想要的最小值，并查看它继承向上。

Answer 3

您是否尝试过：<div class="col-md-6">？因为我认为bootstrap中没有类col-6。

Answer 4

前缀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) { ... }

所以你应该可以使用col-xm-6，因为它没有断点，或者你可以创建自己的宽度为50％的类。

Bootstrap 3网格，为所有显示设置1列大小

4 个答案: