【问题标题】: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希望您的问题得到解决。
    猜你喜欢
    • 2013-11-20
    • 2019-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多