我的文字不在 bootstrap 卡片的范围内。为什么不？

Question

我正在为客户建立一个网站，我试图将文本保存在 Bootstrap 卡片中。其他一切工作正常。卡片未调整大小以包含文本 - 但此问题仅出现在 iPad 及以下的屏幕尺寸上。我该如何解决这个问题？

我已经在互联网上搜索了答案，并且尝试过调整自动换行、填充、边距大小。还有什么我可以尝试的吗？

<section class="container w-80">
            <div class="card col-4 bg-info mb-4 p-0"> 
            <img class="card-img img-fluid" src="assets/images/audience-black-and-white-blur-2014774.jpg" alt="Card image cap" style="opacity: 0.2">
                <div class="card-img-overlay m-1">
                    <blockquote class="blockquote card-text text-white">
                      <p class="card-text">“May the Lord send you help from the sanctuary and give you support from Zion! May He remember all your offerings and regard with favor your burnt sacrifices!”</p>
                      <p class="card-text float-right text-white">Psalm 20:2-3</p>
                    </blockquote>
                </div>
            </div>
            <div class="col-8 pb-4">
                  <h5 class="text-black-50">Our work of starting a conservative, biblically-sound, Reformed church-planting movement in the Bahamas is dependent on the financial support of partners like you.</h5>
            </div>
    </section>

thebigbadcaribwolf's Bootstrap Card Problem

Answer 1

这是由于您的col-4卡

造成的

这个 col-4 意味着您在每个屏幕尺寸中都强制执行严格的 col-4

更好的方法是明确告诉每个屏幕使用什么列

col-lg-4 // for large devices
col-md-6 // for ipad and medium size devices
col-sm-8 // for smaller phone devices

看看这个fiddle https://jsfiddle.net/8shjr6gn/

编辑，如果您使用 SASS boostrap，我建议您也启用 Bootsrap 4.3 的响应式文本功能

只需设置

 $enable-responsive-font-sizes = true

文本会根据屏幕大小进行相应调整

但是如果你使用 CDN 而不是 SASS，你可以写一些类似的东西，使字体大小响应

@media (min-width: 576px) { 
  .card-text{
    font-size:1rem;
  }
}

@media (max-width: 575.98px) {
 .card-text{
    font-size:.8rem;
  } 
}

@media (min-width: 768px) { 
  .card-text{
    font-size: 1rem;
  }
}

@media (min-width: 992px) { 
  .card-text{
    font-size: 1.8rem;
  }
}

@media (min-width: 1200px) { 
  .card-text{
    font-size: 2rem;
  }
}

Answer 2

非常感谢您抽出时间来回答！根据您的反馈，我发现可以通过指定类 col col-md-X

来解决此问题

这是 iPad & iPhone 5S 上的最终产品：thebigbadcaribwolf's Bootstrap Card Solution!

And here's a Pen.

我的文字不在 bootstrap 卡片的范围内。为什么不？

My text isn't staying within the boundaries of my bootstrap card. Why not?

text

bootstrap-4

responsive

blockquote