html - 如何修复 bootstrap 对齐文本列中的空格？

Question

我正在创建一个需要有两列的 div，每一列都对齐。问题是:当我使用两个 div bootstrap col-lg6- 时它看起来不错，但是当涉及到 col-md-6 时，col-sm-6 ，为了在处理不同大小的单词时保持对齐，它会导致单词之间有很多空格。

https://imgur.com/a/Fm4gSMB [图片样本链接]

1) 我已经尝试过使用纯 CSS:

#third-div{
background-color: #904e45;
text-align: justify;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}

2) 尝试使用 word-break: break-all;但是这打破了没有语法逻辑的词。

3) 现在我尝试在 Bootstrap 行中使用两个 Bootstrap 列，例如:

<div id="third-div" class="page-div">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <h1>Lots of text</h1>
          <h2 class="fio">But divided: two columns</h2>
          <p> a lot of text here  </p>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
          <p> a lot of text here </p>
        </div>

      </div>


    </div>

.page-div{
  padding: 15%;
  padding-left: 15%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#third-div{
  background-color: #904e45;
  text-align: justify;
}

Answer 1

这就是 text-align: justify 工作的方式。它在单词之间附加相等的空格以保持文本对齐，如果你修复它，它将不再对齐。

我认为解决方案是在小屏幕上保留一列

<div id="third-div" class="page-div">
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <h1>Lots of text</h1>
          <h2 class="fio">But divided: two columns</h2>
          <p> a lot of text here  </p>
        </div>

        <div class="col-lg-6 col-md-12 col-sm-12">
          <p> a lot of text here </p>
        </div>
    </div>
</div>

这样它们应该像单列一样在彼此下面，并且会有足够的空间来优化对齐文本。