我在用着btn-group
使buttons
100% 宽度,效果很好,但我在第一个按钮上得到了一个奇怪的结果,事实上,如果你看一下图片:
正如您所看到的,第一个按钮相对于其他两个按钮来说太高了。为什么会发生这样的事?
这是我的代码:
<div class="btn-group btn-group-justified custom-class btn-block">
<button type="button" class="btn btn-secondary btn-block">First</button>
<button type="button" class="btn btn-secondary btn-block">Second</button>
<button type="button" class="btn btn-secondary btn-block">Third</button>
</div>
这是一个JSFIDDLE http://jsfiddle.net/rp51o4se/41/.
如果您查看 Bootstrap 4 的文档,您应该这样做:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="btn-group d-flex" role="group">
<a href="#" class="btn btn-primary w-100">Apple</a>
<a href="#" class="btn btn-primary w-100">Samsung</a>
<a href="#" class="btn btn-primary w-100">Sony</a>
</div>
请参阅此处的文档:https://getbootstrap.com/docs/4.1/migration/#button-group https://getbootstrap.com/docs/4.1/migration/#button-group
删除了 .btn-group-justified。作为替代,您可以使用 .w-100 作为元素的包装。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)