Я использую код Twitter Bootstrap 4, указанный ниже. Я получаю дополнительное место, где находится элемент изображения.Когда я удаляю элемент изображения из столбца (т. Е. Тэг пуст), очевидное дополнительное пространство не отображается.Если я добавлю некоторый «текст lorem ipsum» вместо элемента picture, будет показано дополнительное пространство.
Элемент с текстом «content» внутри не показывает никакого дополнительного пространства - класс no-gutters позаботится об этом.
Я сталкивался с этим в прошлом и просто удалил лишнее пространство с помощью CSS, но очевидно, что это не должно быть решением, если вы используете фреймворк, такой как Bootstrap 4 (4.3.1).
Ждем ваших предложений.
<style>
body {
background-color: blue;
}
.container{
padding: 0px;
}
.bg-blue {
background-color: #0D1954 !important;
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover {
color: rgba(255, 255, 255, 1);
}
.navbar-light .navbar-nav .nav-link:hover {
text-decoration: underline;
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-light .navbar-toggler {
color: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
}
.white-background {
background-color: #FFF;
}
<style>
Код html выглядит следующим образом.
<body>
<div class="container">
<div class="row d-block d-lg-none">
<div class="col-12">
<picture>
<source srcset="https://picsum.photos/600/300" type="image/webp" class="img-fluid">
<source srcset="https://picsum.photos/600/300" type="image/jpeg" class="img-fluid">
<img src="https://picsum.photos/600/300" class="img-fluid">
</picture>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 white-background ">
content
</div>
</div>
</div>
</body>
Вот код на скрипке: Код начальной загрузки на скрипке
