Question

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

＆＃13;

<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 -->

＆＃13;

我尝试在top-banner-vid液体容器上做了-15px的左右边距，但这只是在右侧做了一个更大的空白区域。无论我调整了多少右边距，它都保持相同的尺寸。

我尝试在流体容器内放置一个div行。这适用于边缘，但我的视频放在页面中间。我试图通过下车来解决这个问题，但它没有动作。

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

Answer 1

将类no-gutters添加到行中以摆脱排水沟。

这就是你如何删除Bootstrap 4中不需要的边距。

您的内容（任何内容）必须始终进入Bootstrap列。

只有Bootstrap列可能是Bootstrap行的直接子节点。没有例外。

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

您可能还需要将px-0（水平填充0）添加到容器中，如下所示：

＆＃13;

<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>

＆＃13;

在Bootstrap 4

1 个答案: