Как выровнять bootstrap div - PullRequest
Новая
       38

Как выровнять bootstrap div

0 голосов
/ 04 августа 2020

Я хочу выровнять свой bootstrap div следующим образом:

enter image description here

I want a container that has a border and inside it there would be those 3 div. I tried for all day, but could not figure it out using bootstrap.

My code:

<?php

require "navigationbar.php";

?>

<!DOCTYPE html>

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Вы можете решить эту проблему, имея одну строку с двумя столбцами. Первый столбец включает два div, второй включает последний div. 

#div1 {
  height: 300px;
  background-color: red;
}
#div2 {
  height: 300px;
  background-color: blue;
}
#div3 {
  height: 600px;
  background-color: green;
}
<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">

<div class="container">
  <div class="row">
    <div class="col-8">
      <div id="div1">
      div 1
    </div>
    <div id="div2">
      div 2
    </div>
    </div>
    <div id="div3" class="col-4">
      div 3
    </div>
  </div>
</div>
0 голосов
/ 04 августа 2020

Следуя цели вашего дизайна на первом изображении, вот что я придумал: Result

Hopefully it's what you were looking for. Here's the code:

HTML:


      Заголовок   Описание    Боковая панель

CSS: 

* {
  border: 1px solid black;
}

.description {
  height: 500px;
}

Также я рекомендую посмотреть на Bootstrap Еще раз документация системы сетки: https://getbootstrap.com/docs/4.0/layout/grid/

Помните, что есть 12 столбцов, и элементы должны быть упорядочены правильно 

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

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

...