вложенные строки и столбцы полной высоты 4 - PullRequest
Новая
       55

вложенные строки и столбцы полной высоты 4

0 голосов
/ 05 октября 2019

Я пытаюсь сделать заголовок на своем сайте, чтобы он выглядел так: enter image description here

Вот код, который я придумал с помощью Bootstrap 4. 

<div class="container h400">
<div class="row h-100">
    <div class="col-md-8">
        <img src="//placehold.it/800x400" class="img-responsive">
    </div>
    <div class="h-100 col-md text-center align-self-center align-items-center">
        <div class="row h-50">
            <div class="col-md">1</div>
            <div class="col-md bg-dark text-white">2</div>
        </div>
        <div class="row h-50">
            <div class="col-md bg-secondary text-center text-white">3</div>
            <div class="col-md bg-primary text-white">4</div>
        </div>
    </div>
</div>  
</div>

и эта строка css 

.h400 {
    height: 400px;
}

Когда я смотрю это вживую, хотя правильные 4 поля не расширяются, как я надеялся, они будут: enter image description here

Строка не совсем ровная, текст не центрирован по вертикали и не реагирует.

Может кто-нибудь помочь мне сказать, что я делаю неправильно?

Ответы [ 2 ]

1 голос
/ 05 октября 2019

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

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

.h400 {
  height: 400px;
  position: relative;
}
.h400 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</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.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-dark text-white h400">
        <img src="https://im.rediff.com/news/2015/feb/11tulip8.jpg" alt="image">
      </div>
      <div class="col-md-6 h400">
        <div class="row h-100">
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-warning">
            <div class="w-100 text-center">1</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-danger">
            <div class="w-100 text-center">2</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-success">
            <div class="w-100 text-center">3</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-secondary">
            <div class="w-100 text-center">4</div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</body>
</html>

Спасибо ...

1 голос
/ 05 октября 2019

Несколько вещей

  • отзывчивый класс в BS4 равен img-fluid;это было img-responsive в BS3
  • , но вы видите, что когда изображение адаптивно, оно НЕ будет соответствовать высоте 400, что приводит к появлению пустого пространства под изображением
  • . выберите изображение подходящего размера, которое может доставить эффективное сообщение, несмотря на то, что оно скрыто справа (это второй DIV в моем коде) 

.h400 {
  height: 400px;
}

.removePadding {
  padding: 0 !important
}

.myCentreAlign {
  display: flex;
  justify-content: center;
  align-items: center;
}

.myImageStyle {
  height: 400px;
  overflow: hidden;
}

@media screen and (max-width:575px) {
  .myImageStyle {
    height: auto;
  }
  .secondDiv .myImageStyle img {
    height: auto;
    width: 100%;
  }
  .secondDiv.h400 {
    height: auto;
  }
  .theFourDiv .h-50 {
    height: 200px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<h1> Responsive image case (lots of empty space under the image) </h1>
<div class="container h400">
  <div class="row h-100">
    <div class="col-8 removePadding">
      <img src="//placehold.it/800x400" class="img-fluid">
    </div>
    <div class=" col-4 h-100 ">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>

<hr/>

<h1> non-responsive but delivers a good message </h1>
<div class="container h400 secondDiv">
  <div class="row h-100">
    <div class="col-12 col-sm-8 removePadding myImageStyle">
      <img src="//placehold.it/800x400" class="">
    </div>
    <div class=" col-12 col-sm-4 h-100 theFourDiv">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>
...