Bootstrap 4垂直时间线列无法同行显示[存在大边距]

嘿，Robert！第一次在Stack Overflow发帖完全不用紧张，咱们一步步来搞定这个时间线的布局问题～

你遇到的图片被挤到下一行、出现大边距的核心原因，是没有遵循Bootstrap栅格系统的嵌套规则：你直接在.timeline-item-left里放了.col-md-6，但栅格列必须放在.row容器里才能正常工作——不然列的默认外边距（gutter）会导致布局错位，也就是你看到的橙色大边距区域。

试试下面的修改方案：

第一步：调整HTML结构 #

在.timeline-item-left内部新增一个.row no-gutters容器，把左右两个.col-md-6放进去，同时去掉多余的offset-md-6（因为我们要让两列平分一行，不需要偏移）：

<div class="row mt-3 no-gutters">
  <div class="col-md-12">
    <div class="timeline">
      <div class="timeline-item-left">
        <!-- 新增的row容器，用来包裹列 -->
        <div class="row no-gutters">
          <div class="col-md-6 text-right p-3">
            <h3>December 2017</h3>
            <h5>Big Basin Redwoods State Park </h5>
            Berry Creek Falls Loop | 10 Miles
          </div>
          <div class="col-md-6 text-left p-3">
            <a href="adventure_images/big_basin.jpg">
              <img src="adventure_images/big_basin.jpg" class="img-thumbnail" alt="Big Basin" width="150">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

第二步：优化CSS #

去掉.timeline-item-left和.timeline-item-right的width: 100%（因为父级的.col-md-12已经默认占满宽度了，重复设置反而可能影响布局）：

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Containers around content */
.timeline-item-left {
  padding: 10px 30px;
  position: relative;
  background-color: white;
  /* 移除width: 100% */
}

.timeline-item-right {
  padding: 10px 30px;
  position: relative;
  background-color: white;
  /* 移除width: 100% */
}

额外说明 #

• 如果你想让左右列之间保留一点间距，可以去掉.row后面的no-gutters类，这样Bootstrap会给列添加默认的内边距；如果需要完全消除间距，就保留no-gutters。
• 栅格系统的核心规则是行包裹列，以后嵌套列的时候记得遵守这个规则，就能避免很多类似的布局问题啦～

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