Question

我对HTML和CSS非常陌生。我试图将navbar置于网站顶部。这是我的HTML代码：

<!-- Navigation -->
<div class="nav_container">
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
        <div class="container">         
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav page-scroll" style="text-align:center">
                    <li>
                        <a class="page-scroll" href="#page-top">Start</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#packages">Packages</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#showcase">Showcase</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

这是（某些）相关的CSS代码：

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
.nav_container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    opacity: 1;
    text-align: center;
}
.nav_container nav {
    display: inline-block;
    text-align: center;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

如果这个问题与其他问题重复，我必须提前道歉。我已经根据其他已回答的问题尝试了如何设置CSS代码的不同排列，但说实话，CSS代码中的哪个类和哪个类优先于我仍然不清楚，navbar不是定心。我从一个bootstrap站点获取代码，而且只是逆向工程。可能是已经编写的内容包含一些冗余代码（例如，可能有太多的div），因此可能需要清除。

Answer 1

改变：

<div class="nav_container">
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
        <div class="container">

致：

 <div class="container">  
    <div class="nav_container">
    <nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">

Demo

注意：有关查看结果增量结果页面。

导航栏不起作用

1 个答案: