bootstrap - как правильно выровнять структуру? - PullRequest
Новая
       3

bootstrap - как правильно выровнять структуру?

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

Я создал страницу в своем laravel, которая показывает мой список элементов категории, как показано ниже:

Я пытаюсь использовать bootstrap и разбить их на строки и столбцы. Затем верхняя часть состоит из строки категории, в которой отображается 4 изображения вместо 3. Затем в последующих строках должно отображаться 4 элемента в каждой строке, где я выделил ее синим цветом. Однако я помещаю боковую панель в ряд, а каждый объект занимает 3 столбца, так что четвертое изображение в 1-м ряду будет уменьшено.

Мой код: 

.col-3 {
  border: 1px solid red;
}

.col-2 {
  border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <aside class="col-2">
      <ul>
        Aside
      </ul>
    </aside>
    <div class="col-3 text-center">
      1
    </div>
    <div class="col-3 text-center">
      2
    </div>
    <div class="col-3 text-center">
      3
    </div>
    <div class="col-3 text-center">
      4
    </div>
  </div>

Как бы я настроить систему сетки, чтобы она выровнялась элегантно?

1 Ответ

2 голосов
/ 16 марта 2020

Вы можете использовать вложенные сетки и создать строку в своей строке. 

.col-md-3 {
  border: 1px solid black;
  padding: 5% 5% 5% 5%;
}

.col-md-2 {
  border: 1px solid red;
  padding: 5% 5% 5% 5%;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      Sidebar
    </div>
    <div class="col-md-10">
      <div class="row">
        <div class="col-md-3 text-center">
          1
        </div>
        <div class="col-md-3 text-center">
          2
        </div>
        <div class="col-md-3 text-center">
          3
        </div>
        <div class="col-md-3 text-center">
          4
        </div>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...