Question

我希望在屏幕很大时制作这样的布局：
A | B1
A | B2
C | B3
C | B4
当屏幕很小时我想要这样：
一个
一个
B1
B2
B3
B4
ç
C

使用我的解决方案，小屏幕布局就可以了。但在大屏幕上是这样的：
A | B1
A | B2
* | B3
* | B4
ç
C

=这是空的空间。我希望C直接在A下面用于大屏幕。 A小于B而不是C小屏幕

见图：

--- New match ---
Token: A ---
Content: some text of many lines
--- New match ---
Token: B ---
Content: other text with some lines
and text and
text
--- New match ---
Token: C ---
Content: more text and tokens and text
--- New match ---
Token: QQ---
Content: more text more text
--- New match ---
Token: HH---
Content: 
--- New match ---
Token: JJ---
Content:

Answer 1

使用提供的.col-*-push-*和.col-*-pull-*实用程序类：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div>A</div>
      <div>A</div>
    </div>
    <div class="col-md-6">
      <div>B1</div>
      <div>B2</div>
    </div>
    <div class="col-md-6 col-md-push-6">
      <div>B3</div>
      <div>B4</div>
    </div>
    <div class="col-md-6 col-md-pull-6">
      <div>C</div>
      <div>C</div>
    </div>
  </div>
</div>

注意Bootstrap首先是移动的。您需要将它们放在移动设备上的普通订单中，并在更大的尺寸上放入pull / push。

要重置拉或推更大尺寸，您需要在较大尺寸上指定推/拉0。例如，以下内容仅推送sm，但停止推送md及更高版本，允许B在较大的屏幕尺寸上分组：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3">
      <div>A</div>
      <div>A</div>
    </div>
    <div class="col-sm-6  col-md-3">
      <div>B1</div>
      <div>B2</div>
    </div>
    <div class="col-sm-6 col-sm-push-6 col-md-3 col-md-push-0">
      <div>B3</div>
      <div>B4</div>
    </div>
    <div class="col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0">
      <div>C</div>
      <div>C</div>
    </div>
  </div>
</div>

更新后，看起来你正在寻找一个砌体布局，但没有这样做。 Bootstrap本身无法生成此布局，因此您需要使用额外的库。常见的选择是砌体，同位素和Bootstrap瀑布。

以下是如何在Bootstrap .col-上使用Masonry并防止它在小宽度上破坏布局：

加载jQuery（js）
加载Bootstrap（css + js）
装载砌体（js）
将A的B和C中的每一个放在同一.col-*-*父级的不同.row中，同时向该行添加特定类（我在此处使用masonry）。
在col-xs-12的每个col-*-*上放置masonry。如果您不这样做，window.load将在断点之下并排显示为列，如果内容允许的话。{/ li>
在$('.masonry').masonry()事件中，运行.masonry（如果您在父.row上使用了不同的类名，请使用您自己的$(window).load(function(){ $('.masonry').masonry(); })选择器替换。）

/* you don't really need CSS for this to work 
 * code below is aimed more at making the snippet look good on SO
 */

.a-s {background-color: rgba(255,255,0,.07);}
.b-s {background-color: rgba(255,0,0,.07);}
.c-s {background-color: rgba(0,0,255,.07);}

.body {
  overflow-x:hidden;
  margin: 0;
}
.masonry {
  overflow-x: hidden;
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>

<div class="container">
  <div class="row masonry">
    <div class="col-md-6 col-xs-12 a-s">
      <div>A</div>
      <div>A</div>
    </div>
    <div class="col-md-6 col-xs-12 b-s">
      <div>B1</div>
      <div>B2</div>
      <div>B3</div>
      <div>B4</div>
      <div>B5</div>
      <div>B6</div>
    </div>
    <div class="col-md-6 col-xs-12 c-s">
      <div>C</div>
      <div>C</div>
    </div>
  </div>
</div>

ProductSerializer

注意我不一定推荐砌体。我个人更喜欢Bootstrap Waterfall（它更接近Pinterest脚本），但它并不像砌体那么容易使用。我知道Isotope也是一个非常可靠和可靠的选择，但我还没有机会使用它。

Bootstrap网格系统 - 空间很大

1 个答案: