Bootstrap 4 - выровняйте контейнеры элементов по столбцам, чтобы иметь одинаковую высоту - PullRequest
Новая
       22

Bootstrap 4 - выровняйте контейнеры элементов по столбцам, чтобы иметь одинаковую высоту

0 голосов
/ 19 февраля 2019

Используя строку и столбцы Bootstrap 4, можно ли выстроить все элементы на одинаковую высоту контейнера для каждого раздела, такого как заголовок и изображение, чтобы все выстраивалось в ряд в каждом столбце?

Пример: enter image description here

Меня больше всего интересует выравнивание изображений и, возможно, обрезка их при необходимости.Тег image src будет получен из вызова API, поэтому я не уверен, смогу ли я добавить их в качестве фона для контейнера.

Не уверен, что лучшим способом для этого будет ...

Код: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <section class="container-fluid product-section" id="productSection">
    <div class="row card-row">
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="001">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading single line</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/300/tech" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="002">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading double line of text copy and info</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/200/nature" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="003">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading single line</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/300/people" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="004">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading with three lines of copy and information to try and line up.</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/350/animals" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

1 Ответ

0 голосов
/ 19 февраля 2019

Это как ты хочешь ?? 

h5 {
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.card-img-container .rounded {
    border-radius: .25rem!important;
    height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <section class="container-fluid product-section" id="productSection">
    <div class="row card-row">
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="001">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading single line</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/300/tech" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="002">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading double line of text copy and info</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/200/nature" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="003">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading single line</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/300/people" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-col col-sm-6 col-md-4 col-lg-2" id="004">
        <div class="card-container">
          <div class="card-title">
            <h5>Heading with three lines of copy and information to try and line up.</h5>
          </div>
          <div class="card-img-container">
            <img class="img-fluid rounded" src="https://placeimg.com/300/350/animals" alt="" />
          </div>
          <div class="card-description">
            <p class="text-muted">
              See Description<span class="float-right">+</span>
            </p>
          </div>
          <div class="af-button-group">
            <div class="af-link">
              <p>Link 1<span class="float-right">More</span></p>
              <p>Link 2<span class="float-right">More</span></p>
              <p>Link 3<span class="float-right">More</span></p>
              <p>Link 4<span class="float-right">More</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...