个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 01:15:24 24 4
gpt4 key购买 nike

我在 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/

24 4 0
文章推荐： javascript - 将文本存储为变量然后根据变量值更改 css 样式
文章推荐： c - 将参数指针设置为指向函数内的新内存(不返回它)IN C
文章推荐： c++ - 将 C 结构映射到 XML 元素
文章推荐： python - 在 Python 中从 matplotlib 中的散点图绘制曲线？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com