Bootstrap col-md-3 下有 2 个子列

Question

我正在尝试弄清楚如何使用 bootstrap 进行以下网格搜索。

我有 4 个 "col-md-3" div，但在最后一个 "col-md-3" div 下，我想在它下面有 2 个列，每个列占据 'col-md 的一半-3" 宽度。

我要最后一栏下面的两个叠在一起

我本可以像这里一样使用五列宽度 >> 但最后一列 divs 下的内容只需要像 12.5%

这样的小宽度

任何想法

A picture of what Im trying to do

https://i.stack.imgur.com/gv3a7.png

Answer 1

首先添加四个 col-sm-3 并在最后一个列中添加具有两个 col-xs-6 具有 50% 值

的列

[class*='col-']{
  background:#f0f0f0;
  margin-bottom:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-6">col-xs-6</div>
    </div>
  </div>
</div>

Bootstrap col-md-3 下有 2 个子列

Bootstrap col-md-3 with 2 sub cols under

html

css

layout

grid-layout

twitter-bootstrap-3