使用 Twitter Bootstrap 4 在移动设备上增加空间答案

【问题标题】：Extra space on mobile with Twitter Bootstrap 4使用 Twitter Bootstrap 4 在移动设备上增加空间
【发布时间】：2019-02-24 03:52:29
【问题描述】：

我正在使用下面的 Twitter Bootstrap 4 代码，我在图片元素所在的位置获得了额外的空间。当我从列中删除图片元素（因此标签为空）时，明显不会显示额外的空间。如果我添加一些“lorem ipsum text”而不是图片元素，则会显示额外的空间。

内部带有文本“内容”的元素不会显示任何额外的空间 - 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>

这是小提琴上的代码：Bootstrap Code on Fiddle

【问题讨论】：

你能给我们一个我们可以运行的代码示例吗？您可以在 Stackoverflow 编辑器本身或通过小提琴这样做。如果我们无法重现问题，将很难为您提供帮助。
@Helenesh 感谢您的建议 - 我已经更新了帖子

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

看来问题出在容器 CSS 类中的 0 像素的填充。

.container{
    padding:0;
}

它曾经有 15 像素的填充，一行的边距为 -15 像素。达到 0 像素。

当我使容器的填充为 0 并保持 -15 像素的行时，整个事情变得一团糟。

要解决这个问题，要么在行上放置一个 no-gutter 类，要么在行上放置一个 px-0 类，或者添加一个

.row {
    margin:0;
}

分类到您的样式表，“奇怪”的水平滑块消失。

【讨论】：