如何用Bootstrap4实现大屏5列、移动端2列响应式布局并修复适配问题？

Hey there! Let's troubleshoot that responsive column issue you're dealing with. The problem you're seeing (1 column instead of 2 on <576px devices) happens because you're using display utility classes (d-block, d-sm-none) which don't control column width—those are for showing/hiding elements, not adjusting grid layout. Let's fix this the right way with Bootstrap 4's grid system:

Key Bootstrap 4 Grid Rules to Remember #

• Bootstrap uses a 12-column grid system. For mobile (<576px, xs breakpoint), we use the col-* classes.
• To get 2 columns on mobile, each column needs to take up 6 of the 12 available columns (col-6).
• For large screens, since 12 isn't divisible by 5, we can use the auto-sizing col-lg (or col-xl, col-md depending on your definition of "large") class—this will make 5 columns evenly fill the container width.

Working Code Example #

<div class="container">
  <div class="row">
    <!-- Repeat this column 5 times for your products -->
    <div class="col-6 col-lg">
      <div class="p-3 border bg-light">Product Card</div>
    </div>
    <div class="col-6 col-lg">
      <div class="p-3 border bg-light">Product Card</div>
    </div>
    <div class="col-6 col-lg">
      <div class="p-3 border bg-light">Product Card</div>
    </div>
    <div class="col-6 col-lg">
      <div class="p-3 border bg-light">Product Card</div>
    </div>
    <div class="col-6 col-lg">
      <div class="p-3 border bg-light">Product Card</div>
    </div>
  </div>
</div>

Breakdown of the Classes #

• col-6: Forces each column to take 50% width (2 columns total) on screens smaller than 576px.
• col-lg: On screens ≥992px (Bootstrap's "large" breakpoint), each column automatically adjusts to fill 1/5 of the row width. If you want the 5-column layout to kick in at a smaller breakpoint (like ≥768px, "medium"), replace col-lg with col-md.

Why Your Previous Fix Didn't Work #

The d-block and d-sm-none classes control whether an element is displayed, not its width in the grid. They don't affect how columns are sized or arranged, so they won't fix your column count issue.

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