BUT

Question

我正在尝试将导航栏宽度设为100％，因此请在屏幕上拉伸。我这样做，但它不起作用：

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
    background-color: #F5F5F5;
}

div#header
{
    width: 100%;
    height: 220px;
    background-color: lightgray;
    margin: 0 auto;
    margin-top: 0;
}

/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color
*/


/* Navigation */

/* Nav Title */
.nav
{
    background-color: dimgray;
    width: 100%;
    height: 35px;
}

<html>
<head>
    <title>Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <div id="header">
    </div>
    
    <div class="container">
        <!-- Navigation -->
        <div class="nav">
            <div class="nav-items">
                
            </div>
        </div>
    </div>
    
</body>
</html>

这就是它正在做的事：https://gyazo.com/a8cbf7530ccfa46f01a603e1c7dcb465 知道它只是伸展的一部分吗？

Answer 1

container课程仅限于bootstrap.css：

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

所有子元素都将此width称为100%。

未来提示：让您自己熟悉浏览器的DOM检查工具：

Answer 2

正如 Marvin 所述，由于<div class="container">存在，宽度有限。

因此，您可以选择更改标记：

<div id="header">
</div>

    <!-- Navigation -->
    <div class="nav">
        <div class="nav-items">

        </div>
    </div>

为width: 100%提供<div class="nav-items">。

BUT

但是如果您正在追踪导航背景以全宽度扩展的类似内容，但菜单项仍然包含在container中，您可以这样做：

#header{
  height: 40px;
}
.nav-bg{
  background-color: #7878EF;
}
.container{
  width: 80%;
  margin: 0 auto;
}
.nav{
  height: 20px;
  padding: 10px 0;
}
.nav .nav-items{
  float: left;
  margin-right: 20px;
  color: white;
}

<div id="header"></div>
    
<div class="nav-bg">
  <div class="container">
     <div class="nav">
       <div class="nav-items">Nav Item</div>
       <div class="nav-items">Nav Item</div>
       <div class="nav-items">Nav Item</div>
    </div>
  </div>
</div>
<div class="container">
    This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. 
</div>

HTML / CSS'宽度：100％'没有填满整个空间

2 个答案:

BUT