Как выровнять высоту соседних столбцов в Bootstrap - PullRequest
Новая
       16

Как выровнять высоту соседних столбцов в Bootstrap

0 голосов
/ 29 марта 2020

Я хочу добиться чего-то вроде этого: Required Look

Вот что я сейчас получаю Bootstrap: Current Bootstrap Look

Я хочу добиться следующего:

  1. Ширина Крыса ios должна быть такой, чтобы Sites : User : Download = 2:8:2
  2. Sites-Banner, Sites-Search , Download-Banner, Download-Summary все должны иметь одинаковые высоты
  3. User-Login должны быть объединены высота из Sites-Banner & Sites-Search (или Download-Banner & Download-Summary)
  4. Высота из Sites-List, User-Operations, Download-Details должна быть независимой и может продолжаться столько, сколько потребуется.

Вот мой код: Fiddle ( Проверить обновление 1 ) 

<div>
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col bg-primary">
          <p id="sites-banner">Sites Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-secondary">
          <p id="sites-search">Sites Search</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-success">
          <p id="sites-list">Sites List</p>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col bg-danger">
          <p id="user-login">User Login</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-warning">
          <p id="user-operations">User Operations</p>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row">
        <div class="col bg-info">
          <p id="downloader-banner">Download Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-light">
          <p id="download-summary">Download Summary</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-dark">
          <p id="download-details">Download Details</p>
        </div>
      </div>
    </div>
  </div>
</div>
  1. Я не могу выровнять высоту из User-Login с Sites-Banner & Sites-Search [Выполнено: обновление 1]
  2. Sites-List, User-Operations & Download-Details не расширяются независимо

Обновление 1: Новый код

  1. Я получил User-Login, чтобы иметь комбинированную высоту Sites-Banner & Sites-Search, упаковав их в один row (<div class="row">)
  2. Но я все еще не возможность получить высоту Sites-List, User-Operations, Download-Details как независимую.

Обновление 2: Новый код

Получил высоты из Sites-List, User-Operations, Download-Details, чтобы быть внешний вид независимым. Но есть много отступов между столбцами, которые вводят пробелы между ними и заставляют их выглядеть не выровненными

Bootstrap Update 2 Look

Обновление 3: Fiddle

Хотя в коде Обновления 2 может показаться, что Sites-List, User-Operations & Download Details имеют разную высоту, на самом деле это не так. Они выглядят так, поскольку мы применили фоновые классы цвета только к элементу div, который содержит список.

Bootstrap Update 3 Look

Для вопроса о заполнении между столбцы, которые могут быть решены путем применения атрибута класса mx-0 к двум строкам, чтобы сделать поле равным 0 Строки имеют отрицательное поле по умолчанию -15 px. Оформить заказ: Bootstrap отрицательное поле для строк

Без mx-0 приведет к горизонтальной полосе прокрутки на странице. Извлечение: Bootstrap столбцы вызывают горизонтальную полосу прокрутки

Сводка:

  • Обрабатывайте row & col как таблицы tr и td
  • Всегда помещать содержимое в col
  • A col обязательно должно иметь row в качестве родителя. Оформить заказ: Bootstrap Grid Working & Guidlines

1 Ответ

1 голос
/ 29 марта 2020 

.col p{
  margin: 0;
}

.user-login{
  height: 100%
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Downloader</title>
  </head>

  <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="bg-primary">
            <p>Sites-Banner</p>
          </div>
          <div class="bg-secondary">
            <p>Sites-Search</p>
          </div>
        </div>
        <div class="col">
          <div class="bg-danger user-login">
            <p>User-Login</p>
          </div>
        </div>
        <div class="col">

          <div class="bg-info">
            <p>Download-Banner</p>
          </div>
            <div class="bg-light">
              <p>Download-Summary</p>
            </div>

        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="bg-success">
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-warning">
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-dark">
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>
...