Bootstrap 4柔性中心柱

问题描述

我正在使用引导程序4。我有一排3列。但是，我目前将中心列设置为col-7，但是我需要它是一个灵活的列，它占用该行中所有剩余的水平空间。我已经尝试过flex-col，但是它似乎破坏了一切。如果您看一下jsfiddle，您会发现右箭头栏并非一直到最后，这就是我希望的样子。我还计划在右箭头和ipsum引号之间添加第4列。当视口大小更改为较小的分辨率时，所有元素和内容仍应可见。我找到了不是这种情况的解决方案，但这对我不起作用。无论屏幕大小如何，用户都需要能够单击箭头。对于使用Bootstrap XP的您有任何见解吗？

https://jsfiddle.net/fce1ojsp/

链接到jsfiddle时需要代码示例：

<div class="container touchpointContainer">
  <div class="row tall">
    <div class="col-1 centerVertically">
      <a onclick="advanceReview(-1)">
        <img class="prev" src="leftArrow.png"/>
      </a>
    </div>
    <div class="col-7 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>
</div>

解决方法

您可以为此使用flexbox。关键是在中心元素上弯曲增长1。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border flex-grow-1">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>