Bootstrap 4垂直时间轴列不在同一行[大边距]

Question

我正在编写我的第一个网站。我正在尝试使用Bootstrap 4创建一个垂直时间轴，其中时间轴的栏位于两列之间。目前，我不能将文本放在第一列中，而将图像直接放在第二列中的右侧。图像始终被下推到下一行。当我检查元素时，我注意到一个很大的余量（橙色区域）。我该如何删除？这是我在Stack Overflow上的第一篇文章。如果这有点长，我道歉。谢谢！

Relevant Code

<div class="row mt-3 no-gutters">
    <div class="col-md-12">
      <div class="timeline">
        <div class="timeline-item-left">
          <div class="col-md-6 text-right p-3 mr-0">
            <h3>December 2017</h3>
            <h5>Big Basin Redwoods State Park </h5>
            Berry Creek Falls Loop | 10 Miles             
          </div>
          <div class="offset-md-6 col-md-6 text-left">
            <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>

CSS

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
/* Containers around content */
.timeline-item-left {
    padding: 10px 30px;
    position: relative;
/*    background-image: <img src="adventure_images/spiration_light.png">;
    background-repeat: repeat-x; */
    background-color: white;
    width: 100%;
}
.timeline-item-right {
    padding: 10px 30px;
    position: relative;
/*    background-image: <img src"adventure_images/spiration_light.png">;
    background-repeat: repeat-x;*/
    background-color: white;
    width: 100%;
}  

Inspection of Element Screenshot

Website Link (for more detailed inspection)

Answer 1

您可以在自己的风格中使用以下css。

 .timeline-item-left,.timeline-item-left {display: flex}

并删除class offset-md-6。

Answer 2

试试以下

.timeline-item-left {
    padding: 10px 30px;
    position: relative;
    background-color: white;
    width: 100%;
    display: flex;
}

删除offset-md-6

<div class="offset-md-6 col-md-6 text-left">