html - Bootstrap 4.1.1 横幅图像和导航栏不是全宽

标签 html css bootstrap-4

我在 Bootstrap 4.1.1 中创建了一个新页面。我无法将横幅图片和导航栏设置为全宽。页面是live here你能找出我在代码中做错了什么吗?我发布了该问题代码的相关部分。我以前使用过 Bootstrap,只是不是这个最新版本。提前致谢

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");
    }
<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 -->

最佳答案

你可以解决这个问题:

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

我不知道您是否只想使用 Bootstrap ,所以如果是,请不要使用此代码。

希望对你有帮助

问候。

关于html - Bootstrap 4.1.1 横幅图像和导航栏不是全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50261839/

相关文章:

python - 使用 Flask 以更好的方式处理带有可变信息的 POST 请求

html - 如何通过超链接打开Windows资源管理器?

javascript - 我想让 2 个 html 选择标签依赖。我该怎么做?

css - Bootstrap 盒子之间的空白

css - 如何自定义 Bootstrap 5 文件输入文本和按钮位置?

javascript - jQuery 删除操作并显示警报

jquery - 将 Rails 应用加载到现有的 HTML5 页面中(使用 JQuery 或 iFrame)

css - 不同的输入类型(时间、数字)在 chrome 中有不同的高度

javascript - 单击另一个表行时关闭上一个表行

html - Bootstrap 4 动画导航栏不显示