Question

我一直试图通过bootstrap获得一个特定的布局，但收效甚微。

 .row
  .col-md-8
    %h3 Title
    %p Description
  .col-md-4
    .row
      .col-md-12
        %p Side Item 1
      .col-md-12
        %p Side Item 2

Drawing of attempted Layout

我遇到的一些关键问题是在方块之间保持均匀间距，同时仍然保持一切顺利排列。

我也不知道如何将右边的两个元素放到＆＃34; unstack＆＃34;在较小的屏幕上观看时。

非常感谢任何帮助或建议。

Answer 1

您可以使用nested columns进行布局。达到同等高度是另一个故事，可能（有些）取决于这些div内部的内容。

＆＃13;

/**CSS For Display Purposes Only**/

body,
html {
  padding-top: 50px;
}
.alert.alert-top {
  height: 300px;
  border-radius: 0;
  text-align: center;
}
.alert.alert-bottom {
  height: 140px;
  border-radius: 0;
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-info alert-top">Top</div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="row">
        <div class="col-sm-12 col-xs-6">
          <div class="alert alert-success alert-bottom">Bottom Left</div>
        </div>
        <div class="col-sm-12 col-xs-6">
          <div class="alert alert-warning alert-bottom">Bottom Right</div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>

＆＃13;

响应式Bootstrap Tiles（新闻喜欢布局）

1 个答案: