关于新购响应式HTML5布局中col-md类网格系统的使用咨询

Hey there! Since you’re already comfortable with a 16-column grid system (like the one you used in your other project with .eight columns), let’s map that knowledge over to the col-md-* system you’re now working with—it’s actually simpler once you get the core rules down.

Core Differences from Your 16-Column Setup #

Your old grid uses a total of 16 columns per row, so splitting into two equal columns meant using .eight columns twice. The col-md-* system (most commonly from Bootstrap) is built on a 12-column total grid—that’s the key difference to wrap your head around first.

How col-md-* Works #

Let’s break down the components:

• row: Just like your old .row, this wraps your columns to contain the grid and handle spacing.
• col-: The base prefix for columns.
• md-: This is a responsive breakpoint—it means the column layout applies to medium-sized screens and larger (typically ≥768px wide). Other common breakpoints include:
  • sm-: Small screens (≥576px)
  • lg-: Large screens (≥992px)
  • xl-: Extra-large screens (≥1200px)
• The number after the breakpoint (e.g., 6 in col-md-6): This is how many of the 12 total columns the element should occupy.

Translating Your 2-Column Layout #

For the same "equal two-column row" you built with your 16-column grid, here’s what it looks like with col-md-*:

<div class="row">
  <div class="col-md-6">xyz</div>
  <div class="col-md-6">xyz</div>
</div>

Since 12 divided by 2 is 6, each column takes 6 of the 12 total columns—exactly the same equal split as your 8/16 columns.

Bonus: Responsive Flexibility #

One of the perks of this system is adjusting layouts for different screen sizes. For example, if you want the columns to stack vertically on small screens but stay side-by-side on medium+ screens, you can write:

<div class="row">
  <div class="col-sm-12 col-md-6">xyz</div>
  <div class="col-sm-12 col-md-6">xyz</div>
</div>

Here, col-sm-12 makes each column take the full width (12 columns) on small screens, while col-md-6 switches to the two-column layout on medium and larger screens.

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