Question

我在Bootstrap 4.1.1中创建了一个新页面。我无法获得横幅图片和导航栏的全宽。页面是live here你能弄清楚我在代码中做错了什么吗？我发布了问题代码的相关部分。我之前使用过Bootstrap，而不是这个最新版本。提前致谢

＆＃13;

body{color:#000;font-size:20px}
.masthead img{width:100%;height:100%;background-image:url(images/Banner.jpg) no-repeat fixed center;
background-size:cover;}

.navbar-custom {
    background-color: #FF8C46;
}


/* change the brand and text color */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
text-decoration: none; color: #000;
}

a.navbar-brand:link,
a.navbar-brand:visited {
  color: #fff;
  text-decoration: none;
  background-color: #000; 
  border-radius: 50px; padding: .5rem;
}
a.navbar-brand:hover,
a.navbar-brand:focus {
  color: #fff;
  text-decoration: none;
}

/* change the link color */

.navbar-custom .navbar-nav .nav-link {
   text-decoration: none; color: #000;
}

/* change the color of active or hovered links */

.navbar-custom .nav-item.active .nav-link,
.navbar-custom  {
  text-decoration: none;  color: #000;
}

.nav-item .nav-link:hover {
    text-decoration: none;   
}

/* for dropdown only - change the color of dropdown */

.navbar-custom .dropdown-menu {
    background-color: #FF8C46;
}

.navbar-custom .dropdown-item {
    text-decoration: none; color: #000;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    text-decoration: none; color: #000;
    background-color:#FF8C46;
}
.navbar-toggler {
   border-color: rgb(0,0,0);
}
.navbar-toggler-icon {
  color: #000;
}
.navbar-toggler-icon:hover {
  background: #036;
}

span.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

＆＃13;

<body>
<div class="container-fluid">
<header class="masthead">
<img src="http://www.pscompetitiveedge.com/images/Banner.jpg" alt="Peter Scott's Competitive Edge logo"/>
</header>
<nav class="navbar navbar-custom navbar-expand-md">
<button class="navbar-toggler drpbtn" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>     
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="programs.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-fire fa-stack-1x fa-inverse"></i>
</span> Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="references.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-users fa-stack-1x fa-inverse"></i>
</span> References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="rates.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-dollar-sign fa-stack-1x fa-inverse"></i>
</span> Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-question fa-stack-1x fa-inverse"></i>
</span> FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span> Contact</a>
</li>
</ul> 
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="http://www.linkedin.com/pub/peter-scott/44/3/6b3" target="_blank"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:1-520-977-5695"><span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fas fa-phone-volume fa-stack-1x fa-inverse"></i>
</span> Call Peter</a>
</li>
</ul>       
</div>
</nav>
</div>
<div class="container"> 
<-- the page content goes here -->

＆＃13;

Answer 1

您可以解决此问题：

.container-fluid{
  padding: 0 !important;
}

我不知道你是否只想使用bootstrap，所以如果是，请不要使用此代码。

我希望我能帮到你，

问候。

Answer 2

问题在于容器类.container-fluid为侧面分配了15px的填充

对于Bootstrap 4 ，您需要使用jumbotrons

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Docs

对于Bootstrap 3 ，您需要使用.container-full

额外的解决方案将覆盖Bootstrap类：

.container-fluid{
  padding: 0;
}

在这种情况下，我将建议声明第二个类并将这些值分配给该类。所以你不要弄乱.container-fluid以备将来使用。

希望这会有所帮助：＆gt;

Answer 3

所以我在chrome开发人员工具上搞砸了你的代码，并注意到<div class="container-fluid">在左侧和右侧都有填充。有一次，我检查了那些，横幅整个页面。我会尝试覆盖它并设置0px的填充。

Bootrap 4.1.1横幅图像和导航栏不是全宽

3 个答案: