Boostrap 4行未占用div的整个长度

问题描述

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

（主要是）完整代码：

2

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>

解决方法

wide类使行具有width:100%，并且由于将左右边距设置为-15px，所以行通常宽于100％。取消广泛的课程，您会变得很好。