Bootstrap SM尺寸元素换行问题：如何让行内元素保持在同一行？

嘿，我来帮你搞定这个按钮换行的问题！看你的代码和描述，问题出在小屏（小于576px）下按钮容器的宽度和布局设置上，导致三个按钮挤不下自动换行。下面是具体的修复方案：

问题分析 #

当前按钮所在的容器用了col-xs-7，在最小尺寸屏幕下，这个宽度不足以容纳三个按钮加上默认的间距，所以触发了换行。同时容器没有设置强制不换行的布局规则，这也是换行的原因之一。

具体修复步骤 #

• 给按钮容器（header-btn所在的div）添加d-flex和flex-nowrap类，用Flex布局强制内部元素保持在一行
• 调整列宽：把col-xs-7改成col-xs-10，因为logo占了col-xs-2，剩下的10份宽度能给按钮提供更充足的空间，同时保留col-sm-5 col-md-3适配更大屏幕
• 给每个按钮添加flex-shrink-0类，防止按钮被压缩变形，保证每个按钮的最小显示宽度
• 额外添加align-items-center类，让按钮和logo垂直居中对齐，视觉效果更协调

修改后的完整代码 #

<div class="row">
  <div class="col-xs-2 col-sm-3 col-md-2">
    <img src="img/1.png" alt="site-logo" class="site-logo">
  </div>
  <div class="col-xs-0 col-sm-0 col-md-7 d-none d-md-block">
    <label class="sr-only"></label>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <i class="fas fa-search"></i>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="جستجو">
    </div>
  </div>
  <div class="col-xs-10 col-sm-5 col-md-3 header-btn ml-auto d-flex flex-nowrap align-items-center">
    <button class="btn btn-header d-md-none flex-shrink-0">
      <i class="fas fa-search"></i>
    </button>
    <button class="btn flex-shrink-0">ورود</button>
    <button class="btn flex-shrink-0">ثبت نام</button>
  </div>
</div>

补充说明 #

• d-flex将容器转换为Flex布局，让内部按钮默认横向排列
• flex-nowrap强制关闭自动换行，确保元素始终在一行
• align-items-center让按钮和logo垂直居中，提升整体美观度
• flex-shrink-0避免按钮因空间不足被压缩，保证按钮文字完整显示

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