Bootstrap栅格系统入门求助：类名解析及示例需求

Hey there! Let's break down Bootstrap's grid system step by step so it clicks for you. First, remember the core rule: Bootstrap uses a 12-column layout—the page width is split into 12 equal parts, and you control how much space each element takes by assigning column classes.

逐个拆解你代码里的关键类 #

1. container #

• Think of this as the "wrapper" for your grid content. It centers your content on the page and limits its maximum width (this max width changes based on screen size, like narrower on phones, wider on desktops).
• Skip it, and your row will stretch the full screen width, making content look messy on large displays.

2. row #

• This is the parent container for all your columns.
• It uses negative margins to fix spacing between columns, ensuring they line up perfectly in a single row without unwanted gaps.

3. col-md-6 #

This is the star of the show—let's split it into 3 parts:

• col-: Marks this element as a grid column
• md-: The breakpoint—this means the column rules apply to medium-sized screens (≥768px, like tablets or small laptops)
• 6: The column span—this element takes up 6 out of the 12 total columns, so 50% of the row's width

In plain terms: On medium and larger screens, this column will take half the page width. On smaller screens (like phones), it will automatically stretch to 100% width (Bootstrap defaults to stacking columns on mobile).

完整示例 + 扩展场景 #

Here's your code expanded with more use cases to see how it all works:

<div class="container">
  <!-- 基础两行布局 -->
  <div class="row">
    <div class="col-md-6">
      <p>Row 1, Cols 1-6 (50% width on medium screens)</p>
    </div>
    <div class="col-md-6">
      <p>Row 1, Cols 7-12 (50% width on medium screens)</p>
    </div>
  </div>

  <!-- 三列等分布局 -->
  <div class="row mt-3"> <!-- mt-3 adds top margin for spacing -->
    <div class="col-md-4">
      <p>Row 2, Cols 1-4 (1/3 width)</p>
    </div>
    <div class="col-md-4">
      <p>Row 2, Cols 5-8 (1/3 width)</p>
    </div>
    <div class="col-md-4">
      <p>Row 2, Cols 9-12 (1/3 width)</p>
    </div>
  </div>

  <!-- 响应式适配：不同屏幕不同宽度 -->
  <div class="row mt-3">
    <!-- Full width on phones, half on tablets, 1/3 on desktops -->
    <div class="col-12 col-md-6 col-lg-4">
      <p>Responsive Column: Mobile full-width → Tablet half → Desktop 1/3</p>
    </div>
    <!-- Full width on phones, half on tablets, 2/3 on desktops -->
    <div class="col-12 col-md-6 col-lg-8">
      <p>Responsive Column: Mobile full-width → Tablet half → Desktop 2/3</p>
    </div>
  </div>
</div>

Quick extra tips #

• Other breakpoints you'll use often:
  • xs: Extra small screens (<576px, phones)
  • sm: Small screens (≥576px, larger phones)
  • lg: Large screens (≥992px, desktops)
  • xl: Extra large screens (≥1200px)
• If you just write col-6, the column will take 50% width on all screen sizes, no matter how big or small.
• Columns can add up to less than 12 (the remaining space will be empty) or more than 12 (the extra column will wrap to the next line automatically).

Hope this clears things up! Feel free to ask if you hit any other snags with Bootstrap grids.

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