似乎无法摆脱 Bootstrap 4 中流体容器的填充答案

【问题标题】：Cant seem to get rid of padding with of fluid container in Bootstrap 4似乎无法摆脱 Bootstrap 4 中流体容器的填充
【发布时间】：2018-08-23 17:33:11
【问题描述】：

所以我尝试使用 Bootstrap 4 在我的导航栏下添加一个全宽（不是全屏）视频，但我似乎无法摆脱侧面的这些白条（我假设是填充）。

<body>
  <!-- body code goes here -->
  <div id="top-nav-fluid" class="container-fluid fixed-top">
    <div class="container">
      Bootstrap Nav code here
    </div>
    <!-- nav container -->
  </div>
  <!-- nav fluid container -->



  <div id="top-banner-vid" class="container-fluid">
    <div class="row">
      <video autoplay loop muted>
		     <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
		     Your browser does not support the video tag.
	   </video>

    </div>
  </div>
  <!-- The top banner video fluid container -->

我尝试在 top-banner-vid 流体容器上设置 -15px 的左右边距，但这只会在右侧留出更大的空白区域。无论我如何调整右边距，它都保持相同的大小。

我尝试在流体容器中放置一个 div 行。这适用于侧边距，但将我的视频放在页面中间。我试图通过从一开始就将其下车来解决此问题，但它没有移动。

不知道还有什么可以尝试的。非常感谢您的宝贵时间。

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

将no-gutters 类添加到行中以消除排水沟。

这就是您在 Bootstrap 4 中删除不需要的边距的方式。

您的内容，任何内容，都必须始终进入 Bootstrap 列。

只有 Bootstrap 列可以是 Bootstrap 行的直接子级。没有例外。

如果您只需要一列，只需使用 col 类即可。

您可能还需要像这样将px-0（水平填充0）添加到容器中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="top-banner-vid" class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col">
            <video class="embed-responsive embed-responsive-16by9" autoplay loop muted>
                <source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</div>

【讨论】：

我不知道为什么，但这似乎只是在左右两侧添加了白条，并使 div 垂直保持在我的页面中间。如果我没有 col 里面，这将我的 div 移动到我想要它的顶部，那么 no-gutters 似乎没有做任何事情。（不过谢谢你的行/列建议。我不知道你总是需要它们。谢谢^^）
所以我使用的是dreamweaver，我打开了实时视图以查看发生了什么，当我按照您建议的“no-gutters”进行操作时，容器确实会缩小以适应视频的大小里面。所以视频现在似乎填满了整个容器，但该容器外仍有空间。我用于导航的上述容器是否以某种方式干扰？
检查我刚刚添加到答案中的 sn-p。我将px-0 类添加到容器中，并将响应类添加到视频中。
你这么有钱，你都不知道！效果很好，非常感谢。