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

Question

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

（大部分）完整代码：

https://jsfiddle.net/ukd5stc0/

Whosebug要求的代码示例：

<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 class 使行具有 width:100%，并且行通常比 100% 宽，因为左右边距设置为 -15px.去掉宽的 class 就好了。

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

Boostrap 4 Row not occupying entire length of div

html

css

row

twitter-bootstrap

bootstrap-4