如何基于现有代码在Bootstrap 4中实现两列网格布局

你的代码没法实现两列并排，核心问题有两个：

1. 只在row容器里定义了一列（col-md-8），没有添加第二列的容器
2. 要确认项目里已经正确引入了Bootstrap的CSS样式文件，否则网格类不会生效

下面是修改后的可运行代码，添加了第二列（col-md-4），两列宽度总和为12，符合Bootstrap的12列网格规则：

<div class="row">
  <!-- 第一列：占中等屏幕8份宽度 -->
  <div class="col-md-8 section__resume resume-list">
    <h3 class="resume-list_title">education</h3>
    <div class="resume-list__block">
      <p class="resume-list__block-title">University of Minnesota Twin Cities </p>
      <p class="resume-list__block-date">2006 - 2010</p>
      <p>
        Bachelor Computer Engineering Lorem
      </p>
    </div>
    <div class="resume-list__block">
      <p class="resume-list__block-title">School of Informational technologies</p>
      <p class="resume-list__block-date">2004 - 2005</p>
      <p>
        Awesome student, lorem ipsum dolor sit amet, conse ctetur adipisicing elit, sed do eius-
        mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      </p>
    </div>
    <div class="resume-list__block">
      <p class="resume-list__block-title">Lorem Ipsum School</p>
      <p class="resume-list__block-date">2003 - 2006</p>
      <p>
        Student, Lorem ipsum dolor sit amet, consecte tur adipisicing elit, sed do eiusmod tempor
        incididunt ut
      </p>
    </div>
  </div>
  <!-- 第二列：占中等屏幕4份宽度 -->
  <div class="col-md-4">
    <h3>第二列内容</h3>
    <p>这里可以放你的其他内容，比如技能列表、联系方式等</p>
  </div>
</div>

关键要点 #

• Bootstrap网格系统基于12列布局，同一row下的所有列的宽度类数值总和要等于12（比如col-md-8 + col-md-4 = 12）
• 如果需要适配更小屏幕，可以替换成col-sm-*或col-*类，比如col-sm-6 col-md-8，确保小屏幕下也能正确排版
• 必须加载Bootstrap CSS，否则row和col-*类不会产生任何布局效果

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