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

【问题标题】：Bootstrap 4 Vertical Timeline Columns aren't on same row [Large Margin]Bootstrap 4垂直时间轴列不在同一行[大边距]
【发布时间】：2018-01-03 08:48:07
【问题描述】：

我正在编写我的第一个网站。我正在尝试使用 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)

【问题讨论】：

您好罗伯特，您应该阅读 SO 指南。截取代码并附上图像不是一个好主意。请将相关代码添加到您的问题中并适当格式化。
感谢您的提示。我添加了相关代码

标签： html css bootstrap-4 timeline margins

【解决方案1】：

你可以在你的风格中使用下面的css。

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

并删除类 offset-md-6。

【讨论】：

【解决方案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">

【讨论】：