围绕巨型机和导航栏的引导程序填充

Question

我正在努力学习响应式网站引导的基础知识。当我把元素放入"row"类中时，元素没有任何边距或填充，也没有可用空间，但对于jumbotron和导航栏等元素，左侧和右侧似乎有我无法摆脱的填充。如有任何帮助，我们将不胜感激。

<nav class="navbar navbar-expand-lg navbar-expand-md">
<a class="navbar-brand" href="#">lorem ipsum</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<div class="container-fluid">
<h1 class="display-4">lorem ipsum</h1>
<p class="lead">lorem ipsum</p>
</div>
</div>
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>

Answer 1

Boostrap默认情况下在导航栏上应用填充，您只需执行以下操作即可删除左右填充：

.navbar.custom-navbar {
padding-left: 0rem !important;
padding-right: 0rem !important;
}

在<nav>元素上应用custom-navbar类。

要移除jumbotron左右衬垫，请移除jumbotron内部的<div class="container-fluid">，如下所示：

<div class="jumbotron jumbotron-fluid" style="background-image:url(images/hero-image.jpg)">
<h1 class="display-4">odtom.com</h1>
<p class="lead">a site showcasing everything odt.</p>
</div>

还要从页面中删除水平滚动，请将row放置在conatiner-fluid内。

<div class="container-fluid">
<div class="row newsletter">
<p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">subscribe to our newsletter</p>
<form class="col-lg-6 col-md-6 col-sm-6 col-xs-12 newsForm">
<input type="email" placeholder="enter your email..." class="box">
<button type="submit" class="button">></button>
</form>
</div>
</div>

Answer 2

我不确定这是否能回答你的问题，但jumbotron元素中的左右填充来自".contator fluid"类。看起来您的目标是使用".jumbotron fluid"类的容器，该类当前设置为向左和向右填充0px。

如果你需要的话，只需针对这个类删除或修改填充即可。

.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}