如何使用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>