Question

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

＆＃13;

<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>

＆＃13;

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-']与行结合使用，为该行内的列添加空格或规则。

＆＃13;

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

＆＃13;

<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>

＆＃13;

当bootstrap网格崩溃时，如何在元素之间放置一些空间？

2 个答案: