确保按钮中的文本不会溢出（使用 Bootstrap v4）

Question

这是我当前的代码。

<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100" value=1>But.</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Down</button>
</div>
<div class="col-xl-4 col-lg-12">
    <button class="btn btn-secondary w-100" value="1">Button Up</button>
</div>
<div class="col-xl-2 col-lg-12">
    <button class="btn btn-secondary w-100">But.</button>
</div>

这就是它通常的样子。

每个col都有自己的规则，因此它们根据窗口的大小填充列。然而，有一个小的分辨率窗口，按钮可以执行此操作：

在采用正确的布局之前：

“但是”。按钮的内部文本溢出，而“Button down”按钮文本分成两行。我怎样才能保留“但是”中的文字呢？按钮溢出并将“按钮按下”按钮中的文本分成两行？ 我以为我可以重新编译 Bootstrap 来重新定义 xl grid 断点，但这填充了太多（并且对于这样一个小问题修改 Bootstrap 是一个不好的做法）。有没有办法获得我想要的行为？

Answer 1

主要问题是我试图用 w-100 使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间 w-100 强制按钮小于内部文本所需的空间（因为按钮宽度是列的 100%）包含它）。

为了解决这个问题，我删除了这两个“但是”的 w-100。按钮并将我自己的规则添加到我的 css 中。

@media (max-width: 1199.98px) {
    .btn-full-width {
      width: 100%;
    }
  }

因此，默认情况下，按钮占用的空间与内部文本所需的空间一样多，而在较小的屏幕上（低于 XL 断点的任何分辨率），它占用整列。

关于文本被分成两行的另一个问题已通过其他两个按钮中的 text-nowrap 类修复。

<div class="row mb-2">
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width">But.</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100">Button up</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100" type="button">Button down</button>
    </div>
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width invert-button" type="button">But.</button>
    </div>
</div>