当引导网格折叠时如何在元素之间放置一些空间？

Question

例如，看下面的代码，当我将浏览器调整到很小的宽度时，网格会折叠，因此两个按钮组和文本垂直对齐，并且它们之间没有空格，如何添加一些空格？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  
    <div class="col-md-2">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  <div class="col-md-8">
    asdf
    </div>
  </div>

Answer 1

您可以在初始时或在媒体中设置

margin-bottom

，如下所示：

@media (max-width: 991px){
    .col-margin{
        margin-bottom: 10px;
    }  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-margin">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  
    <div class="col-md-2 col-margin">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  <div class="col-md-8 col-margin">
    asdf
    </div>
  </div>

查看有关引导网格系统的更多信息：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

这是为了更好地理解

media

：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您可以将

.classname >[class*='col-']

与您的行结合使用，以向该行内的列添加空间或任何规则。

@media (max-width: 991px) {
  .col-space >[class*='col-'] {
    margin-bottom: 10px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row col-space">
    <div class="col-md-2">
      <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    <div class="col-md-2">
      <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    <div class="col-md-8">asdf</div>
  </div>
</div>

Answer 3

我不确定最初提出此问题时此选项是否不可用，但创建手动媒体查询并不总是必要的。如果五个保证金级别之一适合您的用例，您可以使用断点感知保证金类别：

<div class="col-md-2 mb-3 mb-md-0">

这会将折叠前的边距设置为

0

水平，折叠后设置为

3

水平。