Bootstrap 4：如何在<xl尺寸下移除区块并为右侧区块腾空间

Hey there! Let’s sort out this Bootstrap 4 layout tweak for you. Based on what you described, you want to keep the three-column layout intact for screens larger than 1200px (xl breakpoint), but hide the middle section and let the right section take up the extra space when screens shrink below 1200px. Here are two straightforward solutions:

Option 1: Use Bootstrap’s Built-in Responsive Classes (Simplest Approach) #

We can leverage Bootstrap’s pre-made utility classes to avoid writing custom CSS entirely.

Assuming your base HTML structure looks like this:

<div class="container">
  <div class="row">
    <div class="col-xl-3">Left Section</div>
    <div class="col-xl-6">Middle Section</div>
    <div class="col-xl-3">Right Section</div>
  </div>
</div>

Modify it with responsive display and column classes:

<div class="container">
  <div class="row">
    <!-- Left section stays visible at all sizes, keeps 3 columns on xl, 3 columns on smaller screens -->
    <div class="col-xl-3 col-3">Left Section</div>
    
    <!-- Middle section only shows on xl+ screens, hidden below -->
    <div class="col-xl-6 d-none d-xl-block">Middle Section</div>
    
    <!-- Right section takes 3 columns on xl, 9 columns (remaining space) on smaller screens -->
    <div class="col-xl-3 col-9">Right Section</div>
  </div>
</div>

• d-none d-xl-block: Hides the element by default, only renders it on xl breakpoint and above.
• col-3/col-9: Ensures left and right sections split the available space properly when the middle is hidden.

Option 2: Custom CSS (For Extra Flexibility) #

If you need additional styling adjustments alongside hiding the middle section, use a custom media query targeting screens below the xl breakpoint.

First, add IDs to your sections for easy targeting:

<div class="container">
  <div class="row">
    <div class="col-xl-3" id="left-section">Left Section</div>
    <div class="col-xl-6" id="middle-section">Middle Section</div>
    <div class="col-xl-3" id="right-section">Right Section</div>
  </div>
</div>

Then add this CSS to your stylesheet:

/* Target screens smaller than 1200px (xl breakpoint) */
@media (max-width: 1199.98px) {
  /* Hide the middle section */
  #middle-section {
    display: none;
  }
  
  /* Expand right section to take 75% of the row (matches col-9 behavior) */
  #right-section {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

We use 1199.98px instead of 1200px to avoid conflicts with Bootstrap’s native min-width: 1200px media query for xl screens.

Either solution will get you exactly what you need—keeping the full layout on large screens, and optimizing space by hiding the middle section on smaller ones.

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