如何在Bootstrap中跨行？

Question

我正在尝试在Bootstrap中实现类似下面的布局，但是我很难用它。我觉得这是愚蠢的，但这是我第一次使用Bootstrap，我在这里找不到类似的例子。

谢谢！

我想也许是这样的，但是div C清除div B并且在页面上走得太远了。

<div class="container">
  <div class="row">
    <div class="col-md-8">
      A
    </div>

    <div class="col-md-4">
      B
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      C
    </div>
  </div>
</div>

Answer 1

这里我们有一个关于网格系统的解释。 http://getbootstrap.com/css/#grid

Answer 2

这是一个简单的解决方案：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-12">
        </div>
        <div class="col-sm-12">
        </div>
      </div>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

页面用两个外部列“col-sm-6”分成两半，其中一列包含两个跨越整个宽度的内部列

Answer 3

一个简单的解决方案，如果你想要绿色框介于两者之间。

选中此Bootply进行快速反应检查。

这里的片段：

.something {
  height: 100px;
  margin-top: 10px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="something bg-danger"></div>
    </div>
    <div class="col-md-6">
      <div class="something bg-success"></div>
    </div>
    <div class="col-md-6">
      <div class="something bg-primary"></div>
    </div>
  </div>
</div>

这是另一个示例，其中绿色框将位于其余两个框之下..：

.something {
  height: 100px;
  margin-top: 10px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div clas="col-md-6">
      <div class="col-md-12">
        <div class="something bg-danger"></div>
      </div>
      <div class="col-md-12">
        <div class="something bg-primary"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="something bg-success"></div>
    </div>
  </div>
</div>

Answer 4

我希望这会有所帮助.. :)

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-3"><!--div for the left side abc pattern starts-->
      <div class="row">
        <div class="col-sm-12">
          "standing a"
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          "standing b - adjust the height of this block"
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          "standing c"
        </div>
      </div>
    </div><!-- div for the left side abc pattern ends -->
    <div class="col-sm-6"><!-- div for the right side abc pattern starts -->
      <div class="row">
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-12">
              "block a"
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              "block b"
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          "block c"
        </div>
      </div>
    </div><!-- div for the right side abc pattern ends -->
  </div><!-- row closed here -->
</div>

Answer 5

您应该使用Pure CSS Flexbox 。

查看下面的代码段（使用桌面模式的全屏）：

.box-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
  height: 280px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  color: #fff;
  margin: 15px;
  font-size: 40px;
  font-weight: 200;
}

.a {
  background: red;
}

.b {
  align-self: flex-start;
  order: 1;
  background: green;
  height: 240px;
  margin: 0;
}

.c {
  background: blue;
}

/* On Mobiles */
@media screen and (max-width: 700px) {
  .box-holder {
    width: auto;
    height: auto;
  }
    
  .b {
    align-self: center !important;
    order: 0;
    margin: 15px;
  }
}

<div class="box-holder">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>

希望这有帮助！

Answer 6

如果您需要纯引导程序解决方案，则需要添加col-xs-12以使其在移动设备上100％，并col-sm-6使其在桌面设备上达到50％。添加pull-left和pull-right以避免B面板清除并将C移动到所有

之下

.bg-danger, .bg-primary {
  height: 200px;
}
.bg-success {
  height: 400px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
  <div class="row container-fluid">
    <div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
    <div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
    <div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
  </div>
</div></body>
</html>

点击整页查看差异