Bootstrap v4按钮文本溢出与换行问题解决方案问询

你当前的布局在特定分辨率区间（md到lg断点之间，即768px-991px）出现两个问题：短文本按钮"But."溢出，长文本按钮"Button Down"换行。核心原因是代码仅定义了xl和lg断点的列类，中间的md区间未指定，导致Bootstrap采用默认的自动宽度布局，列宽不足以容纳按钮内容。以下是几种无需修改Bootstrap源码的解决方法：

方案1：补充响应式列类（最贴合Bootstrap设计思路） #

给每个列添加对应中间断点的列类，从根源上保证布局空间充足：

• 若希望md及以上到lg区间按钮独占一行，添加col-md-12：

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

• 若希望md及以上保持多列布局，可调整为col-md-3（总列数3+3+3+3=12，保证4个按钮一排且宽度充足）：

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

方案2：使用Bootstrap内置工具类调整按钮样式 #

无需修改布局，直接给按钮添加工具类解决文本问题：

• text-nowrap：强制文本不换行，解决"Button Down"换行问题；
• px-1/px-2：减小按钮左右内边距，释放文本显示空间，解决"But."溢出问题；
• 若允许溢出文本显示省略号，可替换为text-truncate（需配合d-block或d-inline-block使用）。

示例代码：

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

方案3：自定义CSS针对问题区间微调 #

如果明确问题出现的分辨率范围，可编写响应式样式精准调整：

/* 针对md到lg断点之间的按钮样式 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn-fix {
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    /* 可选：设置最小宽度，确保按钮有足够显示空间 */
    min-width: 5rem;
  }
}

给按钮添加自定义类即可生效：

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

内容的提问来源于stack exchange，提问作者J. Maria