Question

我不知道发生了什么，最后一个图标栏与部分 div 一起出现。我使用的是 bootstrap V4，而且当导航栏菜单处于活动状态时，导航栏下的内容不会向下移动。the problem 最后一个图标栏不可点击。我尝试更改该部分的边距，但没有用。 H1 看起来还可以，但是当涉及到鸡肉部分时，导航栏菜单的不透明度似乎降低了。究竟是什么问题？这是我的 HTML 和 CSS 代码：

body {
    font-size:16px;
    margin:0;


  }
 h2{
    text-align: center;
 }

#header-nav{
    background-color: #1111;
    height: 54px;
    border-radius: 0;
    border:0
  }

.navbar-brand h1 {  
    font-family : 'helvitica' , serif ;
    color: black;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    position:left;

 }
.container-fluid{
    margin: 0;

}

 h1{
 position: relative;
 margin-left: 1px;
 margin-top: -2px;
 margin-bottom: 2px;
 }

 a {
    text-decoration-line: none;
 }
 .navbar-brand a:hover, .navnar-brand a:focus {
    text-decoration:none;
 }
 #nav-list {
    margin-top:10px; 
    background-color:white;


 
 }
 #nav-list a{
    color: black;
    text-align: center;
    font-weight: bold;
    border: 1px solid black;
 }
 #nav-list a:hover {
    background: #575757;
 }


 .navbar-header button.navbar-toggle, .navbar-header .icon-bar {
    border: 1px solid black;
    
 }

 section {
    box-sizing: border-box;
    padding: 5px;
    width:100%;
    height: 1000px;
    margin:20px;
    margin-left:0px;
    margin-right: 0px;
    margin-top: 10px;
    border: 2px solid black;
    position:relative;
    background-color: #9999;
    padding-left: 5px;
    padding-top: 10px;

      }
#chicken {
    text-align: center;
    font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpoint" content="width=device-width , initial-scale=1">

    <title> Assignement solution for module 3</title>
    <link rel="stylesheet" href="bootstrap.css">

    <link rel="stylesheet" type="text/css" href="llstylesheet.css">

</head>
<body>
    <header>
        <nav id="header-nav" class="navbar navbar-default">
            <div class="container"> 
              <div class="navbar-header">
                      <div class="navbar-brand">
      <a href="llindex.html">
                    <h1> food, llc </h1>
                </a>
              </div>
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
  </div>


    <div class="collapse navbar-collapse" id="collapsable-nav">
      <ul id="nav-list" class="nav navbar-nav navbar-right">
       <li class="visible-xs">
               <a href="#">menu</a>

       </li>

             <li class="visible-xs">

               <a href="#">hhhhhhh</a>

       </li>

             <li class="visible-xs active">

               <a href="#">hhhhhhh</a>
        

       </li>
    </ul>
</div>
</div>
</nav>

    </header>
    
    <h2>
        <p class="text-center"> Our menu</p>
    </h2>
  
    <div class="container-fluid">
        <div  class=" col-xs-12">
                <section id="section1">
                <div id="chicken"> Chicken </div>
                <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  </p>
            </section>
            </div>
        </div>


    <script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script type="js/script.js"></script>


</body>
</html>

Answer 1

将这些添加到 ID #nav-list：

position: absolute;
z-index: 20;

<块引用>

代码笔：https://codepen.io/manaskhandelwal1/pen/OJRoMaN

导航栏菜单与部分内容一起出现？

1 个答案: