Bootstrap 4 Row 不占 div 的整个长度

Question

我正在研究引导程序 4、4 列布局。我从 3 列开始。我有一个外部 div 容器和一个包含 3 列的内部行。当我为所有容器添加边框时，我可以看到该行不会弯曲以填充整个父容器 div。我已经尝试了许多 CSS 属性，但我似乎无法弄清楚为什么它不会拉伸以适应父容器。理想情况下，我希望看到中心列的宽度为 100% 减去其他两列的总和百分比（其中有箭头图像）。查看 jsfiddle 以查看代码和生成的渲染。

（大部分）完整代码：

https://jsfiddle.net/ukd5stc0/

stackoverflow 要求的代码示例：

<div class="container touchpointContainer">
  <div class="row tall wide">
    <div class="col-1 centerVertically">
      <a onclick="advanceReview(-1)">
        <img class="prev" src="leftArrow.png"/>
      </a>
    </div>
    <div class="col-10 centerVertically mainText">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
    </div>
    <div class="col-1 centerVertically">
      <a onclick="advanceReview(1)">
        <img class="next" src="rightArrow.png"/>
      </a>
    </div>
  </div>

Answer 1

wide 类使行具有width:100%，由于左右边距设置为-15px，因此行通常宽于 100%。删除宽类，你会很好。