Question

我一直在玩Bootstrap及其响应式网格布局一段时间，并且想知道我是否有可能使用bootstrap。我想创建一个网格布局，它将从大屏幕上的3列调整为2列，在中型屏幕上的2列下调整第3列，然后在小屏幕上最终调整所有3列。

如果有人有任何建议或其他什么我可以参考那将是伟大的。

这就是我一直在玩的东西，但由于某种原因，我无法让它按照我想要的方式工作。在大屏幕上显示列：

|1|3|2|

我想要的是什么：

|1|2|3|

在媒介上是：

|1|2|
|3|

我想要的是什么：

|1|2|
| 3 |


<div class="row">
    <div class="col-sm-6 col-lg-3" style="background-color:black">1</div>
    <div class="col-sm-6 col-lg-3 col-lg-push-3" style="background-color:blue">2</div>
    <div class="col-sm-6 col-lg-3 col-lg-pull-3" style="background-color:red">3</div>
</div>

Answer 1

您可以使用内置的Bootstrap网格类。由于它是12列网格系统，请使用以下命令：

col-lg-4

在较大的屏幕上分为3

col-md-6

在中等大小的屏幕上分为2，在

下分为两个

col-xs-12

在额外的小型和小型设备上扩展到100％。

要在中型屏幕上居中显示第二行，请使用 col-md-push-3 使用 col-lg-push-0 重置大屏幕上的边距

要跨越第二行的整个宽度，请使用 col-md-12

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6 col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-12 col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

是的，这是可能的。 Bootstrap有各种与屏幕尺寸相关的类。你可以用

<div class="col-lg-3 col-md-2 col-sm-3"> 
   ....................
   ....................
</div>

Answer 3

您的课程设置错误。

在大屏幕上显示列：

1 | 3 | 2

这是因为您正在使用col-lg-pull-3和col-lg-push-3。删除这些类将在大屏幕上获得所需的结果。您正在使用col-lg-3。 3 x 3 = 9.您应该使用col-lg-4，因为3 x 4 = 12。

1 | 2 | 3

在媒介上，它是我想要的：

  | 1 | 2 |
  |   3   |

将以下类设置为第三个div。 col-md-12，并使用col-md-6作为前两个<div。

From Bootstrap： Bootstrap包含一个响应式移动第一流体网格系统，当设备或视口大小增加时，可以适当地扩展到12列。

移动优先，因此最佳做法是按照以下顺序在您的标记中设置您的课程：col-xs-*＆gt; col-sm-*＆gt; col-md-*＆gt; col-lg-*

您的标记应如下所示：

<div class="row">
      <div class="col-sm-12 col-md-6 col-lg-4" style="background-color:black">1</div>
      <div class="col-sm-12 col-md-6 col-lg-4" style="background-color:blue">2</div>
      <div class="col-sm-12 col-md-12 col-lg-4" style="background-color:red">3</div>
</div>

这是一个小提琴演示供您查看。 http://jsfiddle.net/yongchuc/zn4L3wcc/1/

响应式Bootstrap列

3 个答案: