Как удалить вертикальное пространство между btn-группами, вложенными в другой btn-goup?

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

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>