Question

我想让我的黑色导航栏div在屏幕上完全伸展。但是，使用宽度：100％确实会改变任何东西。

如果有人能就如何改进我创建导航栏的方式向我提出建议，我们将不胜感激。

https://codepen.io/vegetablecook/pen/qVgOPJ

HTML 

<div class = "container">
    <div class = "span12 text-center">
        <h1>Bill Gates</h1>
  </div>
</div>
  <div class = "container" id = "nav-container">
    <nav class = "navbar navbar-default">
    <ul class = "navbar-nav flex-row ">
      <li class = "nav-item"><a id = "special" href = "#"> Business Magnate</a></li>
      <li class = "nav-item"><a href = "#"> Investor</a></li>
      <li class = "nav-item"><a href = "#"> Philanthropist</a></li>
    </ul>
    </nav>
</div>

CSS:

body { 
  margin-top: 60px;
}

.navbar-nav > li{
  padding-left: 30px;
  padding-right: 30px;
}
.navbar-nav > li > a {
  font-size: 40px;
  color: white;
  text-decoration: none;
}


#nav-container{
  background-color:black;
  width: 100%;
  top: 0px;
  width: 100%;
  height: 100px;

}  

#billgates-headshot{
  width:40%;
}
#row2{
  padding-top: 50px;
}
#billgates{
  padding-left: 50px;
}
#billgates-midspeech{
  width: 70%;
}

Answer 1

＆＃34;容器＆＃34; bootstrap中的类不是100％。你想使用＆＃34;容器流体＆＃34;跨越视口的类。我做了一些小改动，可以在https://codepen.io/anon/pen/LeeMGy找到。

文档参考：https://getbootstrap.com/docs/3.3/css/#overview-container

使用.container作为响应式固定宽度容器。

<div class="container">
  ...
</div>

使用.container-fluid作为全宽容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

Answer 2

这是您对container类的使用 - 如果您使用开发人员工具检查元素，您将看到父容器container填充子容器。

移除嵌套容器或将导航移到父container范围之外以解决此问题。

无法让Navbar在屏幕上伸展

2 个答案: