为什么使用 bootstrap col-sm 时文本重叠？答案

【问题标题】：Why is text overlapping when using bootsrtap col-sm?为什么使用 bootstrap col-sm 时文本重叠？
【发布时间】：2020-02-01 10:10:51
【问题描述】：

我在我的网站中使用引导网格系统，但是当我缩小屏幕时，文本开始重叠。我该如何阻止这个？我留下了一张图片来说明我的意思。我在网上找不到任何答案，所以这就是我发布的原因。

代码：

<div class="col-sm-6">
        <img class="img-center" src="img/Linkedin_ Pic .jpg" width="50%" height="400px">
        <br>
        <h2 class="text-center">Edgar Hardy - President</h2>
        <br>

       <p class="text-center">

          ...</p>

          <div class="br"></div>

        <p class="text-center">...  
          </p>

        </div>


        <div class="col-sm-6">
            <img class="img-center" src="img/Mary Cockerham.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Mary Cockerham - Vice-President</h2>
            ...       
        </div>
    </div>

    <div class="row"> 
      <div class="col-sm-6">
        <img class="img-center" src="img/audrey jones cropped pic.png" width="50%" height="400px">
        <br>
        <h2 class="text-center">Treasurer</h2>
        ...
        </div>
        <div class="col-sm-6">
            <img class="img-center" src="img/Susana Bali.png" width="50%" height="400px">
            <br>
            <h2 class="text-center">Lorem Ispum</h2>
           ...

            </div>
      </div>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

前两项不在该行中。另外，使用 img-fliud 类作为 img 标签。用这个：（我用我自己的图片测试你的代码。你可以为它们更改 src 属性。）


<div class="row">
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Edgar Hardy - President</h2>
        <br>

        <p class="text-center">

            ...</p>

        <div class="br"></div>

        <p class="text-center">...
        </p>

    </div>


    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Mary Cockerham - Vice-President</h2>
        ...
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Treasurer</h2>
        ...
    </div>
    <div class="col-sm-6">
        <img class="img-fluid img-center" src="assets/images/food.png" >
        <br>
        <h2 class="text-center">Lorem Ispum</h2>
        ...

    </div>
</div>

【讨论】：

嘿，谢谢，快速提问，但我现在遇到了无法正确调整图像大小的问题，这是为什么？>
看这里：set responsive image's max-width希望您的问题得到解决。