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

看看这个小提琴 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.

我的文字不在引导卡的范围内。为什么不呢？

2 个答案: