Question

我使用Bootstrap和Galleria创建了一个页面。这是一个带有导航栏的图库页面，因此我尝试使图库适合最剩余的空间。它的宽度定义为100vw，因此它应该只填充页面的其余部分，但它有一个在普通元素结束之前开始的边距，并为页面创建一个滚动条。我可以用body{ overflow: hidden; }删除栏，但有两个问题：

1）箭头按钮和页面边框之间的空格不对称，

2）在有缺陷边缘的地方的小屏幕上有一个很大的空白区域，这只是前一个问题的延伸，但更加明显，会使网站对移动设备不利。

以下是代码：https://codepen.io/algorev/pen/wpjqar

Answer 1

在Bootstrap中，row应该包含在container（在您的情况下为container-fluid）中，并且只有列可以直接显示行的子项。

容器提供了一种中心和水平填充网站的方法   内容。使用.container作为响应像素宽度或   .container-fluid for width：100％横跨所有视口和设备   尺寸。

行是列的包装器。每列都有水平   用于控制它们之间空间的填充（称为装订线）。   然后在具有负边距的行上抵消该填充。   这样，列中的所有内容都在视觉上对齐   左侧。

在网格布局中，内容必须放在其中   列和仅列可以是行的直接子项。

谢谢   flexbox，没有指定宽度的网格列将自动   布局为等宽列。例如，.col-sm的四个实例   从小断点开始，每个都会自动变宽25％。   有关更多示例，请参阅自动布局列部分。

应用这些规则后，您的标记应如下所示

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="galleria">
      ...
    </div>
  </div>
</div>

（请注意，这会在页面的左右两侧留下15px的边距，因此请相应地调整列背景颜色以匹配图库。）

文档：https://getbootstrap.com/docs/4.0/layout/grid/

为什么页面右边有保证金？

1 个答案: