基于屏幕尺寸实现Bootstrap 3.3.5列从6→4→2的布局调整需求

Got it, let's sort out this responsive grid for your video hosting site using Bootstrap 3.3.5! Here's exactly how to add that missing 4-column layout between 768px and 1200px:

Background #

Bootstrap 3's default grid tiers don't cover this exact range out of the box:

• xs (<768px): Your existing 2-column layout works here
• sm (768px-991px) + md (992px-1199px): We'll merge these into a single 4-column layout
• lg (≥1200px): Your existing 6-column layout stays intact

Step 1: Custom CSS Code #

Add this to your stylesheet to override and extend Bootstrap's default grid behavior:

/* 4-column layout for screens 768px to 1199px */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .video-grid-item {
    float: left;
    width: 25%; /* 12 grid columns / 4 columns = 25% */
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px; /* Add consistent spacing between video rows */
  }

  /* Override Bootstrap's default md column styles if you're using them */
  .video-grid-item.col-md-* {
    width: 25% !important;
  }
}

/* Keep your existing 6-column layout for large screens (≥1200px) */
@media (min-width: 1200px) {
  .video-grid-item {
    width: 16.6667%; /* 12 grid columns /6 columns = ~16.67% */
  }
}

/* Keep your existing 2-column layout for mobile (<768px) */
@media (max-width: 767.98px) {
  .video-grid-item {
    width: 50%; /* 12 grid columns /2 columns = 50% */
  }
}

Step 2: Update Your HTML Structure #

Make sure your video items use Bootstrap's base grid classes for the existing layouts, then apply our custom video-grid-item class:

<div class="container">
  <div class="row">
    <!-- Repeat this block for all 12 videos -->
    <div class="video-grid-item col-lg-2 col-xs-6">
      <!-- Your video thumbnail, title, metadata, etc. goes here -->
    </div>
  </div>
</div>

Key Notes #

• We use 1199.98px instead of 1200px in the media query to avoid conflicts with Bootstrap's built-in lg breakpoint
• The !important rule ensures our custom 4-column layout overrides any default Bootstrap col-md-* classes you might have used previously
• The padding matches Bootstrap's default grid gutter so your layout stays consistent across all screen sizes

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