Bootstrap 4 Grid System, я не могу добиться этого макета

Question

Я могу сделать этот макет в обычном CSS, используя flex и grid, но мне нужно знать, как это сделать, используя bootstrap 4. Осталось ничего не попробовать.

<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
    <div class="row">
        <div class="col-sm-6 bg-primary" style="height:250px">d</div>
        <div class="col-sm-6 bg-info" style="height:500px">d</div>
    </div>        
    <div class="row">
        <div class="col-sm-6 bg-info" style="height:250px">z</div>
    </div>
</div>

Это то, что мне нужно, чтобы получить

Answer 1

Пожалуйста, попробуйте это с Bootstrap 4

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>

        <div class="col-md-6">
            <div class="row h-100">
                <div class="col-12 h-50" style="padding-bottom: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>

                <div class="col-12 h-50" style="padding-top: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>
            </div>        
        </div>

        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>
    </div>
</div>

Вы можете изменить padding на внутренних столбцах. Не забудьте поместить row внутрь container или container-fluid, как описано здесь https://getbootstrap.com/docs/4.2/layout/grid/

Контейнеры предоставляют средства для центрирования и горизонтального добавления содержимого вашего сайта. Используйте .container для чувствительной ширины пикселя или .container-liquid для ширины: 100% для всех размеров области просмотра и устройства.

Answer 2

Макет состоит из трех столбцов с центральным столбцом, имеющим 2 строки. Попробуйте это:

<div class="row">
  <div class="col-sm bg-success" style="height:500px">d</div>
  <div class="col-sm">
    <div class="row">
      <div class="col-sm-12 bg-primary" style="height:250px">d</div>        
    </div>        
    <div class="row">
      <div class="col-sm-12 bg-info" style="height:250px">z</div>
    </div>
  </div>
  <div class="col-sm bg-info" style="height:500px">d</div>
</div>

Answer 3

Попробуйте этот код, надеюсь, он вам поможет.

  <div class="row">
    <div class="col-md-3" style="height:100px; background-color:black">d</div>
    <div class="col-md-6 ">

            <div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
            <div class="box mx-auto bg-info" style="height:100px;">b</div>

    </div>
    <div class="col-md-3 bg-info" style="height:100px">z</div>

    </div>

Я разделил одну строку на 3 столбца, оба боковых блока имеют размер 3, а средний блок имеет размер 6, затем отметьтекласс col-auto-p2 & box mx-auto .

Answer 4

Пожалуйста, проверьте, поможет ли вам рабочий фрагмент

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
    <div class="row" style="position:relative;height:500px;">
        <div class="col-sm-12 bg-primary" style="height:200px">d</div>
        <div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
    </div>
</div>        
<div class="col-sm-4 bg-info" style="height:500px">z</div>

</div>