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

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

可能不是最好的方法，但你可以做到以下几点：

Field!PersonID.Value

使用这个CSS：

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

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