Bootstrap的col-sm断点提前触发，500-767px布局不符合预期如何解决

澄清Bootstrap断点生效逻辑 #

Bootstrap 4/5默认采用移动优先的min-width规则，所有col-xx-*类的生效逻辑是「屏幕宽度≥xx断点时生效」，而非小于：

• md断点对应≥768px
• sm断点对应≥576px
• 无后缀的col-*对应所有宽度，无断点限制
  你观察到767px就触发col-sm-12是正常现象：小于768px时col-md-5/7规则失效，自动向下匹配col-sm-12的规则，并非代码bug。

具体调整方案 #

你需要的500px、767px两个断点不属于Bootstrap原生预设，直接新增自定义媒体查询即可实现需求，修改步骤如下：

1. 新增自定义CSS #

/* 适配500px - 767px区间布局 */
@media (min-width: 500px) and (max-width: 767px) {
  /* 两个列并排各占50%，可根据设计图调整比例 */
  .col-md-5.custom-col,
  .col-md-7.custom-col {
    width: 50%;
    flex: 0 0 50%;
  }
  /* 左侧房间信息的图片和文字并排 */
  .room-left .row > div {
    width: 50%;
    flex: 0 0 50%;
  }
  /* 右侧权益和价格区域可根据设计补充对应样式 */
  .room-right .row > div {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* 适配小于500px区间布局 */
@media (max-width: 499.98px) {
  .col-md-5.custom-col,
  .col-md-7.custom-col {
    width: 100%;
    flex: 0 0 100%;
  }
  /* 小屏布局的自定义样式，对应你需要的效果调整即可 */
  .room-left .row > div,
  .room-right .row > div {
    width: 100%;
    flex: 0 0 100%;
  }
}

2. 修改HTML类名 #

给两个外层列加上custom-col类，删除原来的col-sm-12即可：

<div class="col-12">
    <h3>Oda Seçenekleri</h3>
    <div class="room-outer">
      <div class="row">
        <!-- 新增custom-col类，删除col-sm-12 -->
        <div class="col-lg-6 col-md-5 custom-col" id="res_img">
          <div class="room-left">
            <div class="row">
              <div class="col-lg-6">
                <img src="./img/room-1.jpg" class="image">
              </div>
              <div class="col-lg-6">
                <h6>  Manzaralı</h6>
                <ul>
                  <li><i class="fas fa-bed"></i>Çift yatak</li>
                  <li><i class="fas fa-users"></i>3 </li>
                  <li><i class="fas fa-bed"></i>80 ㎡</li>
                </ul>
                <a href="#">Detaylı  Bilgisi <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 新增custom-col类，删除col-sm-12 -->
        <div class="col-lg-6 col-md-7 custom-col" id="res_img_two">
          <div class="room-right">
            <div class="row">
              <div class="col-lg-8 col-12">
                <ul>
                  <li><i class="fas fa-bed" style="border:1px solid #fff6d6; padding:5px 3px; border-radius: 4px;"></i> tek geniş yatak</li>
                  <li><i class="fas fa-users"></i><span>Çocuk Ücretsiz</span></li>
                  <li><i class="fas fa-bed"></i><span> İptal</span></li>
                </ul>
              </div>
              <div class="col-lg-4 col-12">
                <div class="room-price">
                  <p> 3 Gece için Toplam:</p>
                  <span>1.900 TL</span>
                  <a href="#">ODAYI SEÇ</a>
                </div>                   
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

如果需要调整两个区间的排版细节，直接在对应的媒体查询里补充样式即可。

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