如何删除嵌套在另一个 btn 组中的 btn 组之间的垂直空间？答案

【问题标题】：how to remove the vertical space between to btn-groups nested in another btn-goup?如何删除嵌套在另一个 btn 组中的 btn 组之间的垂直空间？
【发布时间】：2016-11-07 21:52:53
【问题描述】：

我正在制作一个这样的广播组：

但我想删除最后两个 btn-groups 之间的垂直空间。

我怎样才能做到这一点？

我的html：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<label class="btn-group btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-default">
    <input name="year" value="2011" type="radio">2011
  </label>
  <label class="btn btn-default">
    <input name="year" value="2012" type="radio">2012
  </label>
  <label class="btn btn-default">
    <input name="year" value="2013" type="radio">2013
  </label>
  <label class="btn-group" data-toggle="buttons">
    <label class="btn-group">
      <label class="btn btn-default">
        <input name="year" value="2014" type="radio">2014
      </label>
      <label class="btn btn-default">
        <input name="year" value="2015" type="radio">2015
      </label>
    </label>
  </label>
  <label class="btn-group" data-toggle="buttons">
    <label class="btn-group">
      <label class="btn btn-default">
        <input name="year" value="2016" type="radio">2016
      </label>
      <label class="btn btn-default">
        <input name="year" value="2017" type="radio">2017
      </label>
    </label>
  </label>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【问题讨论】：

标签： html css twitter-bootstrap radio-button radio-group

【解决方案1】：

可能不是最好的方法，但您可以执行以下操作：

<label class="btn-group btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-default">
    <input name="year" value="2011" type="radio">2011
  </label>
  <label class="btn btn-default">
     <input name="year" value="2012" type="radio">2012
  </label>
  <label class="btn btn-default">
    <input name="year" value="2013" type="radio">2013
  </label>
  <label class="btn-group" data-toggle="buttons">
     <label class="btn-group">
       <label class="btn btn-default">
         <input name="year" value="2014" type="radio">2014
      </label>
      <label class="btn btn-default">
        <input name="year" value="2015" type="radio">2015
      </label>
    </label>
  </label>
  <label class="btn-group" data-toggle="buttons" id="group2">
    <label class="btn-group">
      <label class="btn btn-default">
        <input name="year" value="2016" type="radio">2016
      </label>
      <label class="btn btn-default">
        <input name="year" value="2017" type="radio">2017
      </label>
    </label>
  </label>
</label>

使用这个 CSS：

#group2 {
    position: absolute;
    margin-top: -10px;
}

【讨论】：

【解决方案2】：

试试下面的代码。

.group-4{
  margin-bottom:0px;  
}
.group-4>label{
  margin-bottom:0px;  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<label class="btn-group btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-default">
    <input name="year" value="2011" type="radio">2011
  </label>
  <label class="btn btn-default">
    <input name="year" value="2012" type="radio">2012
  </label>
  <label class="btn btn-default">
    <input name="year" value="2013" type="radio">2013
  </label>
  <label class="btn-group group-4" data-toggle="buttons">
    <label class="btn-group">
      <label class="btn btn-default">
        <input name="year" value="2014" type="radio">2014
      </label>
      <label class="btn btn-default">
        <input name="year" value="2015" type="radio">2015
      </label>
    </label>
  </label>
  <label class="btn-group" data-toggle="buttons">
    <label class="btn-group">
      <label class="btn btn-default">
        <input name="year" value="2016" type="radio">2016
      </label>
      <label class="btn btn-default">
        <input name="year" value="2017" type="radio">2017
      </label>
    </label>
  </label>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：