Question

我最近开始使用bootstrap，并且在某种程度上也是网页设计的新手。我一直遇到导航栏没有加入.container-fluid width的问题，最终导致无响应。我希望我的导航栏固定并处于“高”z位置，以重叠内容。我一直在Stack Overflow上寻找答案，但没有运气。有人可以赐教我吗？

我目前没有确切的代码，但它看起来像：

<div class="container-fluid">
   <div class="navbar">
        <ul class="nav nav-pills" id="navbar">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
   </div>

CSS

 #navbar{
 position:fixed;
 z-index:999;
 background-color: rgba(0,0,0,0.7);
 }

Answer 1

固定导航栏的bootstrap中有一个CSS类（navbar-fixed-top）。

将您的第一个<div>更改为<nav>（导航是div，但它是HTML5标准）
添加navbar-default＆amp; navbar-fixed-top

<nav>

将container-fluid div嵌入<nav>...</nav>
为您的<li>商品

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <ul class="nav nav-pills" id="navbar">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
  </div>
</nav>

如果您不希望导航栏重叠内容，则需要在CSS文件中添加填充：

CSS：

body{
    padding-top: 70px;
}

Documentation here

我希望这有帮助！

固定导航栏无法获得父宽度？

1 个答案: