时间戳

首页 > 解决方案 > btn-group 创建第一个按钮太高

html - btn-group 创建第一个按钮太高

问题描述

我btn-group用来制作buttons100% 的宽度，这很好用，但我在第一个按钮上得到一个奇怪的结果，事实上如果你看图片：

在此处输入图像描述

如您所见，第一个按钮相对于其他两个按钮太高了。为什么会这样？

这是我的代码：

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

标签： htmlcssbootstrap-4

解决方案

如果您查看 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

删除了 .btn-group-justified。作为替代，您可以使用 .w-100 作为元素的包装器。

推荐阅读