如何用CSS正确制作竖条

Question

我正在尝试使用CSS中的边框制作一些竖条。我正在使用Boostrap网页系统，我正在尝试向某些列添加左右边框。当一行中的某个列（没有边框的列）高于列而不是带有边框的列时，会出现问题。边框变得碎片化，在ascii中的行之间有空白空格：

content |         some text in a row
content |         that keeps
content |         on going
blank             and going
blank             and going
blank             and going
content |         some text in a different row
content |         that goes up to here

编辑：

<div class="row">
  <div class="col-md-3">
    ...
  </div>
  <div class="col-md-3" style='border-left: 1px solid black; border-right: 1px solid black;'>
    ...
  </div>
  <div class="col-md-6">
    ... (Stuff here is vertically taller than stuff in previous column)
  </div>
</div>

假装|正在连接，这些部分之间存在差距。我该如何解决这个问题？

Answer 1

Read all you ever need to know about faux columns

管理摘要：在父元素上放置一个垂直平铺的背景，从而赋予幻觉两个元素的高度相等。您将学习CSS的最重要的一课是，它只是一个表示工具，不需要以任何方式与您的实际布局相对应。

如果旧浏览器为of no concern，请改用flexbox。