Question

我想在我的页面中在Jumbotron的右侧创建一个可折叠的浮动导航栏。我正在使用Bootstrap 3.0。

当导航栏折叠时，我的导航栏会折叠，但网站名称会消失。导航栏也固定在屏幕顶部而不是右侧。我究竟做错了什么？谢谢你的帮助。

<section>
<div class="navbar"> 
    <nav class="navbar navbar-inverse" role="navigation">
         <a class="navbar-brand" href="index.html">DD Portfolio</a>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
    </nav>
 </section>


        <div class="jumbotron">
         <div class="container">
            <h1>Who Am I?</h1>
                <p>I am a student and content writer</p>
            <p><a href="#" class="btn btn-primary btn-large">Learn More</a></p>
        </div>
       </div>
</div>

Answer 1

您应该将站点名称添加到navbar-header，并且您还错过了div结束标记。这是完整的代码：

 <section>
    <div class="navbar">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">DD Portfolio</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</section>


<div class="jumbotron">
    <div class="container">
        <h1>Who Am I?</h1>
        <p>I am a student and content writer</p>
        <p><a href="#" class="btn btn-primary btn-large">Learn More</a></p>
    </div>
</div>

Bootstrap 3.0中的Navbar问题

1 个答案: