如何防止Bootstrap3的col类换行？解决按钮与长链接布局异常

嘿，这个布局问题我熟！用Bootstrap的Flexbox类就能轻松解决，既满足链接占满剩余空间不换行，还能让按钮稳稳待在右侧，甚至能把链接改成btn样式，一举两得～

直接上可行的代码方案：

<div class="container">
  <div class="row">
    <div class="col-sm-6 mb-3">
      <div class="d-flex align-items-center">
        <!-- 带btn样式的链接：占满剩余空间，超长文本自动截断不换行 -->
        <a href="#" class="flex-grow-1 text-truncate btn btn-link">
          这是一段超级长的链接文本，用来测试小屏幕下会不会把按钮挤到下一行或者自己换行
        </a>
        <!-- 右侧操作按钮 -->
        <button class="btn btn-primary ms-2">点击操作</button>
      </div>
    </div>
    <!-- 可以复制多个这样的项做列表 -->
    <div class="col-sm-6 mb-3">
      <div class="d-flex align-items-center">
        <a href="#" class="flex-grow-1 text-truncate btn btn-link">
          另一个正常长度的链接
        </a>
        <button class="btn btn-secondary ms-2">查看详情</button>
      </div>
    </div>
  </div>
</div>

给你拆解下关键类的作用：

• d-flex：把父容器改成弹性布局，让链接和按钮横向排列
• align-items-center：让链接和按钮在垂直方向上居中对齐，视觉更协调
• flex-grow-1：让链接自动占据容器内除按钮之外的所有剩余空间，不会和按钮抢位置
• text-truncate：当链接文本超长时，自动截断并显示省略号，绝对不会换行挤掉按钮
• btn btn-link：满足你想要链接用btn样式的需求，和按钮风格统一；要是不需要btn样式，换成普通a标签就行，只要保留前面的布局类
• ms-2：给按钮加一点左边距，避免和链接贴得太近

这样不管屏幕多大，按钮都会牢牢待在链接右侧，链接文本超长时也只会截断不会换行，完美解决你的问题～

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