Bootstrap小屏幕尺寸调整失效问题求助

Let’s work through your layout problems step by step to get things behaving as expected:

1. Cards Not Stretching to Full Width on Small Screens #

The main culprit here is the fixed inline width (style="width: 18rem;") on your .card elements. Even though your col-sm-12 class makes the column take up all 12 grid columns on small screens, the card’s fixed width prevents it from stretching to fit the column.

Fix:
Remove the fixed width from each .card, or add Bootstrap’s w-100 class to force the card to take the full width of its parent column:

<div class="card w-100">
  <!-- Card content here -->
</div>

Now on small screens, the card will match the full width of the col-sm-12 container.

2. Images Not Hiding on Small Screens #

Your current class combination d-sm-none d-md-block is doing the opposite of what you need. Here’s the breakdown of Bootstrap’s responsive display classes:

• .d-sm-none hides the element on screens ≥576px (sm breakpoint) and larger
• .d-md-block shows the element only on screens ≥768px (md breakpoint) and larger

This means your images are visible on small screens (<576px) but hidden between 576px and 767px — exactly reversed from your goal.

Fix:
Use d-none d-md-block instead. This setup:

• .d-none hides the element by default (including small screens)
• .d-md-block makes it visible only on md-sized screens and larger

<img class="card-img-top d-none d-md-block" src="img/1.jpg" alt="Tower">

Quick Additional Check #

Make sure you don’t have any custom CSS that’s overriding Bootstrap’s default styles. For example, custom width, flex, or display properties on col-* or .card elements could interfere with the grid behavior.

Corrected Card Example #

Here’s how your first card should look with these fixes applied:

<div class="col-sm-12 col-md-6 col-lg-3">
  <div class="card w-100">
    <img class="card-img-top d-none d-md-block" src="img/1.jpg" alt="Tower">
    <div class="card-body">
      <h5 class="card-title">Tower</h5>
      <p class="card-text">City: dubay Zip-Code 4993 <br></p>
      <p>Created: 1.2.2015, 05:40:00 </p>
    </div>
  </div>
</div>

Apply these changes to all your card elements, and your layout should now behave as intended: full-width cards on small screens, with images hidden until the md breakpoint.

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