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

Question

我正在制作一个类似这张图片的广播组:

但我想删除最后两个 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>

Answer 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;
}