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

【问题标题】：btn-group create first button too hightbtn-group 创建第一个按钮太高
【发布时间】：2018-10-01 16:56:46
【问题描述】：

我正在使用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。

【问题讨论】：

试试这个 .btn-block+.btn-block { margin-top: 0; }
转到按钮，你应该删除类btn-block
@PUNGIS，请看我的回答，因为它只使用 Bootstrap 而不是自定义 CSS 来解决这个问题。

标签： html css bootstrap-4

【解决方案1】：

如果您查看 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 作为元素的包装器。

【讨论】：

感谢问题已解决，只是一个问题：如果您查看此 jsfiddle：jsfiddle.net/rp51o4se/50 您会看到减小窗口大小的第一个按钮边距与其他两个按钮未对齐，这很奇怪，为什么？
他们有 margin-left: -1px 导致这个，不知道为什么。如果需要，您可以轻松地将其设置为 0px，以使其消失。奇怪的是 Bootstrap 没有解决这个问题，因为我们正在关注他们的文档。
好的，现在似乎可以了。是否可以添加一些保证金，例如btn-group？因为有了你的解决方案，我失去了利润
是的，当然，这是一个例子：jsfiddle.net/rp51o4se/52
是的！但是只有响应模式有余量，是否也可以应用完整模式？

【解决方案2】：

给你

<div class="btn-group btn-group-justified custom-class btn-block">
  <button type="button" class="btn btn-secondary">First</button>
  <button type="button" class="btn btn-secondary">Second</button>
  <button type="button" class="btn btn-secondary">Third</button>
</div>

.group-start {
  background-color: #0B3359 !important;
}

#sidebar {
  min-height: 100vh;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  overflow: hidden;
}

.custom-class {
  display: flex;
}

.custom-class .btn {
  flex: 1
}

【讨论】：

【解决方案3】：

尝试从第二个按钮中删除.btn-block。从这个链接看到了参考：See here

<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">Second</button>
    <button type="button" class="btn btn-secondary btn-block">Third</button>
</div>

【讨论】：