Блог

Главная - Вопросы по программированию - заголовок начальной загрузки — одинаковая высота для всех

заголовок начальной загрузки — одинаковая высота для всех

#javascript #html #css #bootstrap-4

#javascript #HTML #css #bootstrap-4

Вопрос:

Я использую загрузочные карты на двух веб-страницах. На одной странице текст заголовка исправлен, поэтому я могу использовать минимальную высоту, чтобы соответствовать высоте заголовка их карточки. На второй странице эти карточки будут сгенерированы, поэтому я не буду знать длину текста и слова. Я хочу, чтобы заголовок карты был одинаковой высоты для всех в строке.

Есть ли какой-либо способ вычислить минимальную высоту на основе самого большого заголовка карты в строке?

Я уже использую колоду карт. Насколько я знаю, это для высоты всей карты, моя проблема здесь в заголовке карты. В целом все карты имеют одинаковую высоту.

введите описание изображения здесь

Пример:

     <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
    <body>
     
    <div class="container">
            <div class="card-deck my-3 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-header align-items-center d-flex
                justify-content-center card-header-height">
                        <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
                    </div>
                    <div class="card-image">
                        <img class="img-fluid" src="img_avatar1.png">
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mt-3 mb-4">
                        </ul>
                    </div>
                </div>
            </div>
    </div>
    </body>
    </html>

Обновить
У меня возникла та же проблема после добавления списка (ul) и элементов списка (li) в тело карты. Мне потребовалось несколько часов, чтобы выяснить, почему высота заголовка карты больше не работает. Убедитесь, что ваш текст li одинаковой длины. Один из моих li был слишком длинным, поэтому он состоял из 2 строк, что снова портит общий вид заголовков карты.

Ответ №1:

Вы были почти на месте. Вам просто нужно использовать h-100 class, чтобы убедиться, что высота находится 100% на вашем card-header с d-flex

Живая демонстрация:

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="card-deck my-3 text-center">
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
      <div class="card mb-4 box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center h-100">
          <h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
        </div>
        <div class="card-image">
          <img class="img-fluid" src="https://via.placeholder.com/150">
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Комментарии:

1. Я только что нашел аналогичный вопрос здесь. Похоже, вы правы. Единственная проблема сейчас заключается в ширине ровно от 768 до 794 пикселей (iPad), это не работает. Придется проверить это сейчас, прежде чем отмечать какое-либо решение.

2. @Yaerox Это должно сработать — Но вы можете использовать медиа-запросы для ipad, чтобы убедиться, что высота сохраняется 100% Вы хотите, чтобы я добавил медиа-запрос для ipad?

3. У меня есть некоторые, нужно будет проверить их, если есть мои проблемы;)

4. Используя h-100, я могу удалить все мои медиа-запросы, которые изменяют мои карты. У меня все еще есть та же проблема в моем коде, в то время как в вашем фрагменте нет. Я не смог найти ни одного медиа-запроса, который активируется при изменении ширины устройства. У вас есть какой-нибудь намек для меня, какой медиа-запрос у вас на уме? — Обновление: Хорошо, я думаю, проблема возникает, как только я добавляю элементы <li> в <ul> в теле карты. Собираюсь проверить это сейчас.

5. @Yaerox я сильно сомневаюсь, что это возможно с такой структурой, поскольку row и col-md-4 останавливают нас здесь : (