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

Question

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

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

我想让最后一列下面的两个叠在一起。

我本可以像这里一样使用五列宽度 >> https://stackoverflow.com/a/22799354/8011344但最后一个 col div 下的内容只需要像 12.5% 这样的小宽度

任何想法

A picture of what Im trying to do

/image/gv3a7.png

Answer 1

首先添加四个 col-sm-3 并在最后一个 col 添加行，其中两个 col 和 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>