如何使用Bootstrap实现3-5-4网格布局？

Question

我一直在尝试使用 Bootstrap 创建上面的网格布局，但找不到方法，有什么建议吗？

Answer 1

这在大多数情况下使用嵌套行非常简单。如果您想要左边两列正好是 3/5 列，问题就来了。你可以通过简单地这样做来接近它，这几乎是正确的，这就足够了吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-4">IMAGE1</div>
        <div class="col-xs-8">TEXT1</div>
      </div>
      <div class="row">
        <div class="col-xs-4">IMAGE2</div>
        <div class="col-xs-8">TEXT3</div>
      </div>
    </div>
    <div class="col-xs-4">SIDEBAR</div>
  </div>
</div>

如果您需要完全 3/5/4 布局，那么在仍然使用 Bootstrap 的情况下唯一明智的做法是 customise网格系统来获得粒度。在这种情况下，您需要将其设为 24 列布局，这将使您的网格看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-xs-16">
      <div class="row">
        <div class="col-xs-9">IMAGE1</div>
        <div class="col-xs-15">TEXT1</div>
      </div>
      <div class="row">
        <div class="col-xs-9">IMAGE2</div>
        <div class="col-xs-15">TEXT3</div>
      </div>
    </div>
    <div class="col-xs-8">SIDEBAR</div>
  </div>
</div>

如何使用Bootstrap实现3-5-4网格布局？

How to achieve 3-5-4 grid layout by using Bootstrap?

twitter-bootstrap

grid-layout