默认引导导航栏不会下推内容

Question

大家好， 我的响应式引导菜单有问题。如果我单击切换按钮以获取下拉菜单，它不会将其他内容向下推。它只是滚动内容。想了3个小时还是没搞明白。

这是 HTML 代码。

    nav{
	width:100%;
    position: absolute;
      top: 0;
      right:0;
      height:40px;
    }


    nav .navigatsioon .navbar{
	border-radius:0px;
	background-color:transparent;

    }
    nav .navigatsioon .container-fluid{
	text-align:center;
    }
    nav .navigatsioon .navbar.navbar-default{
	border-color:transparent;

    }
    nav .navigatsioon .navbar-default{

    }
    nav .navigatsioon .navbar-default .navbar-nav a{
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	height:40px;
	padding-top:10px;
	border-bottom:3px solid transparent;
	 transition: all 0.5s ease;
	 font-size:15px;
    }
    nav .navigatsioon .navbar-default .navbar-nav a:hover{
	color:white;
	border-bottom:3px solid orange;
    }
    nav .navigatsioon .navbar-default .navbar-nav a.active{
	color:white;
	border-bottom:3px solid orange;
    }

    nav .navigatsioon .navbar-default .navbar-nav a:visited{
	text-decoration:none;
	color:white;
	text-transform:uppercase;
	font-weight:bold;
    }

<nav>
    <div class="navigatsioon">
    <div class="navbar navbar-default" role="navigation">
      <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-          target=".navbar-collapse">
        <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>


    <div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.kopakutt.ee/" class="active">AVALEHT</a></li>
         <li><a href="hinnakiri.php">HINNAKIRI</a></li>
        <li>
          <a href="renditingimused.php">Renditingimused</a>
          
        </li>
         <li><a href="tehnika.php">Tehnika</a></li>
        <li><a href="kontakt.php">KONTAKT</a></li>
      </ul>
      
       
        
        </li>
      </ul>
      </div><!-- /.navigatsioon -->
      </div>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->

    </nav>

Answer 1

不要在你的 CSS 中使用 position: absolute; top: 0; right:0; height:40px;。这就是问题所在——

查看sn-p

.column {
height:100px;
background-color:black;
}
nav{
	width:100%;  
    }


    nav .navigatsioon .navbar{
	border-radius:0px;
	background-color:transparent;

    }
    nav .navigatsioon .container-fluid{
	text-align:center;
    }
    nav .navigatsioon .navbar.navbar-default{
	border-color:transparent;

    }
    nav .navigatsioon .navbar-default{

    }
    nav .navigatsioon .navbar-default .navbar-nav a{
	color:red;
	text-transform:uppercase;
	font-weight:bold;
	height:40px;
	padding-top:10px;
	border-bottom:3px solid transparent;
	 transition: all 0.5s ease;
	 font-size:15px;
    }
    nav .navigatsioon .navbar-default .navbar-nav a:hover{
	color:red;
	border-bottom:3px solid orange;
    }
    nav .navigatsioon .navbar-default .navbar-nav a.active{
	color:red;
	border-bottom:3px solid orange;
    }

    nav .navigatsioon .navbar-default .navbar-nav a:visited{
	text-decoration:none;
	color:blue;
	text-transform:uppercase;
	font-weight:bold;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav>
    <div class="navigatsioon">
    <div class="navbar navbar-default" role="navigation">
   
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.kopakutt.ee/" class="active">AVALEHT</a></li>
         <li><a href="hinnakiri.php">HINNAKIRI</a></li>
        <li>
          <a href="renditingimused.php">Renditingimused</a>
          
        </li>
         <li><a href="tehnika.php">Tehnika</a></li>
        <li><a href="kontakt.php">KONTAKT</a></li>
      </ul>
      
       
        
      
      </div><!-- /.navigatsioon -->
    
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->

    </nav>
    <div class="column col-xs-12">
    </div>