btn-group创建第一个按钮太高 [英] btn-group create first button too hight
本文介绍了btn-group创建第一个按钮太高的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 btn-group
将 buttons
的宽度设置为100%,效果很好,但是我在第一个按钮上得到了一个奇怪的结果,实际上,如果您看一下在图片上:
I'm using btn-group
to make the buttons
100% width, this works well but I get a strange result on the first button, infact if you look at the picture:
您会看到第一个按钮的高度过高,另外两个按钮过高.为什么会这样?
as you can see the first button is too height agains the other two. Why happened this?
这是我的代码:
<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 .
推荐答案
如果您查看Bootstrap 4的文档,则应该这样做:
If you look at the documentation for Bootstrap 4, this is how you should do:
<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/迁移/#button-group
已删除.btn-group-justified.作为替代,您可以将.w-100用作元素的包装.
Removed .btn-group-justified. As a replacement you can use as a wrapper around elements with .w-100.
这篇关于btn-group创建第一个按钮太高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文