我检查了bootstrap.min.css，并且没有提到navbar、navbar-inverse的width:100% strong> 和 navbar-fixed-top 类，但它仍然显示标题部分的 100% 宽度。
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container">
<div >
<h3>Free Area</h3>
</div>
</div>
</nav>
同样，我想根据页面宽度以100%宽度显示页脚。我使用了下面的 CSS 和 HTML 代码，但它没有显示 100% 宽度 页脚。那么如何制作页脚使其显示在页面的整个宽度中呢？
CSS
footer { margin: 0px 0; background:#006699; }
HTML
<footer>
<div class="container">
<div class="row ">
<div class="col-md-6 col-sm-6">
<h3>Section Area 01</h3>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
<div class="col-md-6 col-sm-6">
<h3>Section Area 02</h3>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</div>
</footer>
最佳答案
如requested by the OP ，OP面临的问题是，有 <footer>或<header>仅限于 width .container的Bootstrap 框架的一部分。对此的最佳解决方案是将元素直接放在主体下方。
因此，您的解决方案是替换(可能)这个旧代码:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<!-- Contents -->
</header>
<!-- Body -->
<footer>
<!-- Contents -->
</footer>
</div>
</div>
</div>
</body>
将其从 .container 中取出，这限制了width并将其直接放在 <body> 下像这样:
<body>
<header>
<!-- Contents -->
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Body -->
</div>
</div>
</div>
<footer>
<!-- Contents -->
</footer>
</body>
关于html - 使用 Bootstrap 3 页脚未以全页宽度显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35226855/