Bootstrap 4页面缩小时如何隐藏中间列？请排查代码问题

Hey there, let's sort out why your middle column isn't hiding when you shrink the page to mobile size in Bootstrap 4!

问题根源 #

The core issue here is that Bootstrap 4 doesn't have a built-in col-0 class. That class you added to the middle column does nothing—so the column won't hide on mobile like you expected.

正确解决方案 #

To hide elements responsively in Bootstrap, you need to use its dedicated display utility classes instead of made-up column classes. Your goal is to hide the middle column on mobile (below the md breakpoint, which is 768px) and show it as a 2-width column on md and larger screens.

Here's the fixed code:

<div class="row no-gutters">
  <div class="col-md-4 col-6">Account</div>
  <div class="d-none d-md-block col-md-2">Followers</div>
  <div class="col-md-6 col-6">Recent post</div>
</div>

类名解释 #

Let's break down what each class does for the middle column:

• d-none: Hides the element by default (this covers mobile sizes)
• d-md-block: Overrides the d-none setting and displays the element as a block when the screen hits the md breakpoint (768px) and above
• col-md-2: Assigns the column to take up 2 parts of the 12-column grid on md and larger screens

With this setup, your left and right columns will each take 50% width on mobile (col-6), and the middle "Followers" column will only appear when the screen is wide enough (md and up).

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