Bootstrap行内多按钮居中 响应式下按钮缩小不换行问题

• 你使用d-flex创建的flex容器默认自带flex-wrap: nowrap属性，所有子元素会被强制排在同一行，不会触发自动换行
• flex布局的子元素默认属性为flex-shrink: 1，当视口宽度不足、一行容纳不下所有元素时，浏览器会自动压缩子元素宽度适配容器，这就是按钮、数量选择器越缩越小的核心原因
• 你仅给.pro-button类加了white-space: nowrap避免文字折行，其余操作按钮、数量选择器组件没有配置禁止收缩的属性，因此这几个组件压缩变形最明显
• 你写在列容器<div class="col-lg-12 col-md-8 col-sm-12 align-items-center">上的align-items-center是无效属性，该类仅在flex容器上生效，普通块级元素加了没有任何效果

1. 给flex容器添加flex-wrap: wrap属性，允许空间不足时子元素自动换行，同时保留align-items: center实现垂直居中
2. 给所有flex直接子元素设置flex-shrink: 0，禁止元素在空间不足时被压缩变形
3. 给数量选择器组件设置固定宽度，避免输入框宽度异常
4. 用flex的gap属性替代零散的margin设置，控制元素间距更统一

调整后的CSS代码 #

#row-container {
  max-width: 100%;
  padding-left: 0 !important;
  margin-left: -30px;
}

.pro-button {
  background-color: #fff;
  border-style: solid;
  border-width: thin;
  color: black;
  padding: 15px 32px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition-duration: 0.4s;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 5px;
}

.myButton1 {
  background-color: #117beb;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  color: whitesmoke;
  font-family: Arial;
  font-size: 16px;
  padding: 8px 31px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  margin-left: 5px;
}

.addtolist {
  background-color: #c4c4c4;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 31px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 固定数量选择器宽度，避免压缩 */
.input-group {
  width: 130px;
  flex-shrink: 0;
}

调整后的HTML结构 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="container" id="row-container">
  <div class="row">
    <!-- 移除了无效的align-items-center类 -->
    <div class="col-lg-12 col-md-8 col-sm-12" style="padding-left:0;">
      <!-- 新增flex-wrap: wrap支持换行，加gap控制间距 -->
      <div class="d-flex flex-wrap align-items-center gap-2">
        <button class="pro-button">
          <strong><a asp-action="detailsnewaudio" asp-controller="product">Print Songbook with Audio</a></strong>
          <br />$@Model.product.UnitPrice
        </button>
        <button class="pro-button">
          <strong><a asp-action="DetailsNew" asp-controller="product">PDF Songbook with Audio</a></strong>
          <br />$@Model.product.UnitPrice
        </button>
        <button class="pro-button">
          <strong><a asp-action="detailnew" asp-controller="product">Digital Album</a></strong>
          <br />$@Model.product.UnitPrice
        </button>

        <div class="input-group">
          <button class="quantity-minus d-icon-minus"></button>
          <input class="quantity form-control" type="number" min="1" max="1000000">
          <button class="quantity-plus d-icon-plus"></button>
        </div>
        <button id="AddToCartBtn" class="myButton1">
          <i class="fa-solid fa-bag-shopping"></i>Add to Cart
        </button>
        <button style="border:0; padding:0; margin-left:5px;">
          <a asp-action="" asp-controller="" class="addtolist">Add to List <i class="fa-solid fa-caret-down"></i></a>
        </button>
      </div>
    </div>
  </div>
</div>

调整后桌面端所有元素保持垂直居中对齐，视口缩窄到一行放不下所有元素时，元素会自动换行排列，不会出现被压缩变形的问题，同时保留原有按钮样式、hover过渡效果。

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