html - Bootstrap 5.3.x: Why does "w-100 d-block d-md-none" not work when I try to break a column to a new line

admin管理员组

文章数量:1293365

I am trying to create a list of images and each occupies 4 columns in medium and larger screens and occupies 12 columns on smaller screens.

However, when I try to resize the screen to smaller size (using toggle device toolbar) the images still occupies the same col as the medium screen.

mobile-view

According to the documentation:

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

Ref: .3/layout/columns/#column-breaks

I also tried the following but not working. w-100 d-block d-sm-block d-md-none col-12 d-block d-md-none

When I change the d-md-none to d-lg-none, it works but I want to hide it starting from medium screen.

Ref: .3/utilities/display/#hiding-elements

I am doing something wrong here?

<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
  <div class="row mt-1">
    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="">
      </div>
    </div>

    <!-- show in smaller screen and hide on medium and larger -->
    <div class="w-100 d-block d-md-none"></div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="">
      </div>
    </div>

    <!-- show in smaller screen and hide on medium and larger -->
    <div class="w-100 d-block d-md-none"></div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="">
      </div>
    </div>
  </div>
</div>

I am trying to create a list of images and each occupies 4 columns in medium and larger screens and occupies 12 columns on smaller screens.

However, when I try to resize the screen to smaller size (using toggle device toolbar) the images still occupies the same col as the medium screen.

mobile-view

According to the documentation:

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

Ref: https://getbootstrap/docs/5.3/layout/columns/#column-breaks

I also tried the following but not working. w-100 d-block d-sm-block d-md-none col-12 d-block d-md-none

When I change the d-md-none to d-lg-none, it works but I want to hide it starting from medium screen.

Ref: https://getbootstrap/docs/5.3/utilities/display/#hiding-elements

I am doing something wrong here?

<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
  <div class="row mt-1">
    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>

    <!-- show in smaller screen and hide on medium and larger -->
    <div class="w-100 d-block d-md-none"></div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>

    <!-- show in smaller screen and hide on medium and larger -->
    <div class="w-100 d-block d-md-none"></div>

    <div class="col-12 col-md-4">
      <div class="listing-item">
        <img class="img-fluid img-thumbnail" src="https://placehold.co/600x400">
      </div>
    </div>
  </div>
</div>

• html
• css
• twitter-bootstrap
• bootstrap-5
• bootstrap-grid

Share Improve this question Follow edited Feb 13 at 13:33 isherwood 61.1k1616 gold badges120120 silver badges169169 bronze badges asked Feb 12 at 17:42 JayJay 122 bronze badges 4

• You could try w-100 d-md-none which should show by default until the md breakpoint and above. Though, I think what you have should work... – Daniel Black Commented Feb 12 at 18:03
• 1 If your divs are 12 columns wide at lower than md they are already breaking into new lines, I don't see the need to add a line break explicitly like that. – high-rolls Commented Feb 12 at 18:25
• @high-rolls, yes, that is the first thing I did. However, when I try to see what it looks like in mobile (using toggle device toolbar), it does not break to new line—that is why I tried to find an alternative. – Jay Commented Feb 13 at 10:26
• Duplicates: Bootstrap not scaling properly on mobile devices | Bootstrap 4 grid not resizing for phone screens | Bootstrap grid does not adjust according to scaling | Responsive website zoomed out to full width on mobile – isherwood Commented Feb 13 at 13:36

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You should try this: d-none d-sm-block

Yours might be not working because of overriding, as you mentioned the same thing multiple times.

I found that adding this tag <meta name="viewport" content="width=device-width, initial-scale=1"> tells the browser how to scale and display the page on different screen sizes - now the issue is resolved.

Ref: https://developer.mozilla./en-US/docs/Web/HTML/Viewport_meta_tag

本文标签：