Я пытаюсь создать макет начальной загрузки 4, для которого я добавил скриншот.Я прочитал большую часть других постов о переполнении стека, но не нашел решения
- Макет
.container-fluid имеет серый цвет заливки, который использует мой пользовательский класс .bg-grey. - В соответствии с дизайном тело находится в центре, поэтому я добавил
.container класс для переноса столбцов. .col-8 имеет .bg-white, а .col-4 имеет .bg-darkзанятия с ними.И мне пришлось сделать это с той же высоты. - Между ними есть водосточный желоб (пробел).
Решение проблем
- Получение дополнительного поля справа, чтобы дизайн не находился по центру между ними.
Дизайн пытается достичь
Так что проблема в моем решении заключается в том, что я получаю дополнительную маржу справа.Я пробовал два случая, для которых у меня есть код.
CASE 1:
Много пытался с помощью приведенного ниже кода и не смог найти решение.
- Если я добавлю поле к
col-8, второй div .col-4 уменьшится с увеличением общей ширины. - Если я добавлю
.bg-white и .bg-dark к новому дочернему элементу,размер цвета заливки меняется. - К недавно созданному div внутри я добавил класс
.h-100, но даже это не сработало
<div class="col-sm-8 ">
<div class="content px-4 py-2 bg-white h-100">
<h3 class="heading03">Life at </h3>
<h2 class="heading02">.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>
<div class="col-sm-4 ">
<div class=" content px-4 py-2 bg-black white-text h-100">
<h5 class="heading05">Latest at </h5>
<h4 class="heading04 text-muted">Top 10 </h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
</p>
<h5 class="heading05">Latest at </h5>
<h4 class="heading04 text-muted">Top 10 </h4>
<p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
</p>
</div>
</div>
CASE 2: Этот макет я попробовал из приведенного ниже примера с сайта начальной загрузки.https://getbootstrap.com/docs/4.0/examples/product/
Так выглядит текущий код.Поля не равны
- Попытка удаления
. mr-md-3 из .col-4.Это не помогло
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-grey pb-5 ">
<div class="row">
<div class="container">
<!-- second part -->
<div class="row pt-5">
<div class="d-md-flex flex-md-equal w-100 ">
<div class="col-8 bg-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden">
<div class="my-3 py-3">
<h3 class="heading03">Life </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</p>
</div>
</div>
<div class="col-4 bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-white overflow-hidden">
<div class="col-12">
<div class="my-3 p-3">
<h2 class="display-5"> headline</h2>
<p class="lead">subheading.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>