Разверните контейнер внутри столбца, чтобы он соответствовал высоте столбца в сетке bootstrap - PullRequest
Новая
       12

Разверните контейнер внутри столбца, чтобы он соответствовал высоте столбца в сетке bootstrap

0 голосов
/ 12 апреля 2020

Почему зеленый контейнер расширяется над синим столбцом, когда я устанавливаю height: 100% или h-100?

Как мне сделать так, чтобы он соответствовал оставшейся высоте столбца? 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <h3>Content I want to keep</h2>
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 12 апреля 2020

Если я правильно понимаю, вы хотите наложить зеленый блок на синий блок.

Невозможно установить высоту, поскольку между двумя блоками есть текст (два). 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>
...