gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:36:00 26 4
gpt4 key购买 nike

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

enter image description here

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

最佳答案

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

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

关于html - 如何删除嵌套在另一个 btn 组中的 btn 组之间的垂直空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38213954/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com