Question

我使用bootstrap 4构建了一个页面。我添加了一个包含4个项目的Carousel。你可以在这里看到它：Landing-Page with Bootstrap 4

这就是问题：加载完成后，你会在边缘上留出一些空间。我会说，你可以滚动到右侧，有更多的空间，不应该。

我试图修复它：

移除幻灯片按钮
使用其他典型的旋转木马
更改图片/调整大小
注释掉了div和nav等其他元素
尝试了其他浏览器（firefox，chrome，safari）

我希望，这不是一个错误。

感谢您的帮助

Answer 1

您可以通过查看元素#ausbildung（容器和jumbotron之间）来解决问题。

它的宽度比它应该大30px！

尝试删除其上的边距。

Answer 2

<div id="ausbildung" class="row" style="height: 50px;"></div>

Bootstrap .row类使用负边距来计算默认包含填充的子元素。使用

覆盖.row样式

.row {
    margin-left: 0px; 
    margin-right: 0px;
}

并且空格和水平滚动条应该消失。请记住，如果你在其他地方使用带有Bootstrap col的.row，你可能需要相应地调整你的col。

Answer 3

由于任何行的边距（如您接受的答案中所示），但由于某些行未嵌套在containers内，因此未出现此问题。

请参阅文档grid system bs4

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

＆＃13;

此处bs4 containers也明确指出Containers are the most basic layout element in Bootstrap and are required when using our default grid system.

简而言之，containers的填充会抵消rows的负边距，从而抵消columns 的填充

<强>解

您拥有的任何顶级row，都应该将其包含在container内，在您的情况下，您应该使用container-fluid

Bootstrap 4 Carousel响应式设计

3 个答案: