Bootstrap 5：修复按钮换行问题，实现自适应文本与按钮布局

你要的效果完全可以通过Flex布局实现，核心是让描述区域占满剩余空间，按钮区域保持自适应宽度且不换行，具体操作如下：

直接用Bootstrap内置类实现（无需额外CSS） #

在卡片内容的父容器上用Bootstrap的Flex类，就能快速搞定：

<div class="card">
  <div class="card-body d-flex align-items-center gap-3">
    <!-- 描述区域：占剩余空间，允许收缩 -->
    <div class="flex-grow-1 min-w-0">
      <p class="card-text">这里放品牌描述内容，不管内容多长都会自动占满剩余空间，不会把右侧按钮挤到下一行</p>
    </div>
    <!-- 按钮区域：宽度自适应，不收缩 -->
    <div class="flex-shrink-0 text-nowrap">
      <button class="btn btn-primary me-2">导航按钮1</button>
      <button class="btn btn-outline-secondary">导航按钮2</button>
    </div>
  </div>
</div>

自定义CSS方案（如果需要更灵活控制） #

如果要自己写CSS，核心规则如下：

/* 父容器启用Flex布局 */
.card-flex-container {
  display: flex;
  align-items: center;
  gap: 1rem; /* 描述和按钮的间距 */
}

/* 描述区域：占剩余空间，允许收缩 */
.card-description {
  flex: 1 1 auto;
  min-width: 0; /* 关键：解决内容过长时无法收缩的问题 */
}

/* 按钮区域：宽度自适应，不换行 */
.card-button-group {
  flex: 0 0 auto;
  white-space: nowrap;
}

核心原理 #

• flex-grow-1（或flex:1）让描述区域自动填充父容器的剩余空间
• min-width:0是关键：默认Flex子元素的最小宽度是内容宽度，加上这个属性后，描述区域才能被压缩，避免撑开容器导致按钮换行
• flex-shrink-0让按钮区域保持自身宽度，不会被压缩；text-nowrap确保按钮内的文字不会换行

这样调整后，不管描述内容长短，按钮都会始终保持单行显示，宽度随自身内容自适应，描述区域自动占满剩余空间，完美适配各种屏幕大小。

内容的提问来源于stack exchange，提问作者Anuj TBE