Мой текст не находится в границах моей загрузочной карты. Почему бы и нет? - PullRequest
Новая
       38

Мой текст не находится в границах моей загрузочной карты. Почему бы и нет?

0 голосов
/ 17 июня 2019

Я создаю веб-сайт для клиента и пытаюсь сохранить текст в карте 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

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Большое спасибо, что нашли время ответить!С вашими отзывами я понял, что эту проблему можно решить, указав классы col col-md-X

Вот конечный продукт для iPad и iPhone 5S: Решение для начальной загрузки thebigbadcaribwolf!

А вот и ручка.

0 голосов
/ 17 июня 2019

Это вызвано тем, что 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/

Редактировать, если вы используете Sup 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;
  }
}
...