Bootstrap 4 - вертикально выровнять div к основанию столбца - PullRequest
Новая
       7

Bootstrap 4 - вертикально выровнять div к основанию столбца

2 голосов
/ 07 января 2020

У меня есть макет из двух столбцов с одним элементом слева и двумя справа.

Как сохранить последний элемент внутри правого столбца выровненным относительно нижней части левого столбца? 

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

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container-fluid">
  <div class="row">
      <div class="col-7">
          <div class="card card-block">
              <h3>Column 1</h3>
              <br />
              <br />
              <br />
              <p>..end of content</p>
          </div>
      </div>

      <div class="col-5">
          <div class="row no-gutters">
              <div class="col-12">
                <div class="card card-block">
                  <h3>Column 2</h3>
                </div>
              </div>

              <div class="col-12 align-self-end">
                <div class="card card-block">
                  <h3>Column 3</h3>
                </div>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>

enter image description here

Спасибо за помощь!

Ответы [ 4 ]

1 голос
/ 07 января 2020 
Why not use different row for 1 - 3  and 2 - 4.
Because you have using bootstrap grid system. 

7 col - 5 col
-------------

Bootstrap макет с двумя столбцами 

Kindly add style in fourth column div. 

style="position: absolute;bottom: 0px;"

<!-- Page Content -->
<div class="container-fluid">
        <div class="row">
    <div class="col-7">
        1 <br />
        <br />
        <br />
        <br />
        2
    </div>

    <div class="col-5">
        <div class="row no-gutters">
             <div class="col-12 align-self-end">
                3
            </div>  
            </div>
            <div class="row no-gutters"  >
             <div class="col-12 align-self-end" style="position: absolute; 
            bottom: 0px; ">
                4
            </div>             

        </div>
    </div>
 </div>
</div>
0 голосов
/ 07 января 2020 
<div class="col-5">
            <row class="no-gutters">
                <div class="col-lg-12">
                    3
                </div>

                <div class="col-lg-12">
                    4
                </div>
            </row>
        </div>

Это займет всю ширину в любом размере экрана.

0 голосов
/ 07 января 2020

Добавляя .align-items-end к родительской строке, он вертикально выравнивает столбцы по ее нижней части.

Если вы хотите, чтобы столбец № 3 был сверху, но сохранял текущую позицию столбца 4 Я бы посоветовал вам заглянуть в библиотеку jQuery с именем eqHeight . Это позволит вам растянуть родительские столбцы (col-7 и col-5) до одинаковой высоты, после чего столбец № 3 должен быть сверху со столбцом 1. 

<!-- Page Content -->
<div class="container-fluid">
  <div class="row align-items-end">
      <div class="col-7">
          1<br>
          <br>
          <br>
          2
      </div>

      <div class="col-5">
          <div class="col-12">
              3
          </div>

          <div class="col-12 align-self-end">
              4
          </div>
      </div>
  </div>
</div>
0 голосов
/ 07 января 2020

Это может быть то, что вы ищете: 

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        3
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        2
    </div>
    <div class="col-md-6">
        4
    </div>
</div>

ИЛИ 

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...