0

我正在为客户建立一个网站，并试图将文本保存在 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!”&lt;/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 的引导卡问题

4

2 回答 2

0

这是由您col-4的入卡引起的

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

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

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;
  }
}
于 2019-06-17T04:25:15.420 回答
0

非常感谢您花时间回答！根据您的反馈，我发现可以通过指定类来解决此问题col col-md-X

这是 iPad 和 iPhone 5S 上的最终产品：thebigbadcaribwolf 的 Bootstrap Card 解决方案！

这是一支钢笔。

于 2019-06-17T19:30:38.603 回答