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

Question

​

​

我一直试图创建一个网格布局，如上面的引导，但无法找到一个方法来做，有什么建议吗？

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的情况下进行布局的唯一合理方法是定做网格系统以获得粒度。在这种情况下，您需要将其设置为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>