Question

如何在bootstrap 3中实现这种布局。我尝试过拉动＆amp; amp;推，但是这个人正在努力，谢谢。

xs = 1 col（col-xs-12）：

AAA

BBB

CCC

DDD

EEE

FFF

GGG

sm = 2 col（col-sm-6）：

AAA | EEE

BBB | FFF

CCC | GGG

DDD

md = 3 col（col-md-4）：

AAA | DDD | GGG

BBB | EEE

CCC | FFF

lg = 4 col（col-lg-3）：

AAA | CCC | EEE | GGG

BBB | DDD | FFF

http://www.bootply.com/16d9SFyDGD

Answer 1

您可以添加其他色块尺寸，以便根据不同的屏幕分辨率进行调整。

col-xs适用于较小的屏幕尺寸，因此如果您在笔记本电脑屏幕或桌面上查看，则无法看到所需的效果。

我认为以下内容会有所帮助，但您可能需要调整数字以获得所需的效果。在我提供的bootply.com示例中，我使用的col-sized在您的示例中水平查看。

您可以查看网格布局类here的引导文档，以获得更深入的解释并查看其他示例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<div class="row">
      <div class="col-xs-1 col-md-1 col-lg-1">AAA</div>
      <div class="col-xs-1 col-md-1 col-lg-1">BBB</div>
      <div class="col-xs-1 col-md-1 col-lg-1">CCC</div>
      <div class="col-xs-1 col-md-1 col-lg-1">DDD</div>
      <div class="col-xs-1 col-md-1 col-lg-1">EEE</div>
      <div class="col-xs-1 col-md-1 col-lg-1">FFF</div>
      <div class="col-xs-1 col-md-1 col-lg-1">GGG</div>
  </div>
</div>

Answer 2

推动或拉动无法达到目的。

如果每个分辨率等级中至少出现相同的元素，但顺序不同，则有可能，但是您要搜索的包装无法完成。

我能想到的唯一情况是绝对使用负上下边距或定位元素，但这需要所有元素具有相同的尺寸以避免不必要的包装或重叠。

Answer 3

更简单的方法是使用CSS多列，因为自然流是从上到下然后从左到右。

@media (min-width: 768px) {
    .row.sp {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .row.sp {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .row.sp {
        column-count: 4;
    }
}

演示：http://www.codeply.com/go/br3073C2JJ

高级boostrap 3色谱柱订购

3 个答案: