Question

我正在尝试使用bootstrap 3在我的导航栏上挂一个新div。This正是我试图让它看起来像。任何帮助将不胜感激，我的导航代码低于

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="hidden-xs hidden-sm" href="http://stay-u-nique.com/index.php" title="Stay U-nique"><img src="http://stay-u-nique.com/assets/images/logo.png" title="Stay U-nique" alt="Stay U-nique"></a>
<a class="navbar-brand visible-xs visible-sm" href="http://stay-u-nique.com/index.php">
<img title="Stay U-nique" alt="Stay U-nique" height="20" width="20" src="http://stay-u-nique.com/assets/images/brand_icon.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://stay-u-nique.com/">Home</a></li>
<li class="dropdown">
<a href="http://stay-u-nique.com/apartments/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Apartments <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="http://stay-u-nique.com/apartments/">View all apartments</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://stay-u-nique.com/apartments/rambla-catalunya/">U-nique Rambla Catalunya</a></li>
<li><a href="http://stay-u-nique.com/apartments/gracia/">U-nique Passeig de Gracia</a></li>
<li><a href="http://stay-u-nique.com/apartments/sagrada-familia/">U-nique Sagrada Familia</a></li>
<li><a href="http://stay-u-nique.com/apartments/barcelona226/">U-nique Barcelona 226</a></li>
<li><a href="http://stay-u-nique.com/apartments/sitges-beach/">U-nique Sitges Beach</a></li>
<li><a href="http://stay-u-nique.com/apartments/raval/">U-nique Raval</a></li>
<li><a href="http://stay-u-nique.com/apartments/marina/">U-nique Marina</a></li>
</ul>
</li>
<li><a href="http://stay-u-nique.com/social/">Social</a></li>
<li><a href="http://stay-u-nique.com/contact/">Contact and Location</a></li>
<li><a href="http://stay-u-nique.com/blog/">Blog</a></li>
</ul>
</div>
</div>
</nav>

Answer 1

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
        <style>
            #hangingDiv{
                width: 200px;
                height: 100px;
                color: Magenta;
                position:relative;
                top:10%;
                left:65%;

            }

        </style>
    </head>

    <body class="container-fluid">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header ">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a id="logo" class="hidden-xs hidden-sm" href="http://stay-u-nique.com/index.php" title="Stay U-nique">
                        <img src="http://stay-u-nique.com/assets/images/logo.png" title="Stay U-nique" alt="Stay U-nique">
                    </a>
                    <a class="navbar-brand visible-xs visible-sm" href="http://stay-u-nique.com/index.php">
                        <img title="Stay U-nique" alt="Stay U-nique" height="20" width="20" src="http://stay-u-nique.com/assets/images/brand_icon.png">
                    </a>
                </div>
                <div id="navbar" class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="http://stay-u-nique.com/">Home</a></li>
                        <li class="dropdown"><a href="http://stay-u-nique.com/apartments/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Apartments <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                            <li><a href="http://stay-u-nique.com/apartments/">View all apartments</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="http://stay-u-nique.com/apartments/rambla-catalunya/">U-nique Rambla Catalunya</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/gracia/">U-nique Passeig de Gracia</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/sagrada-familia/">U-nique Sagrada Familia</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/barcelona226/">U-nique Barcelona 226</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/sitges-beach/">U-nique Sitges Beach</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/raval/">U-nique Raval</a></li>
                            <li><a href="http://stay-u-nique.com/apartments/marina/">U-nique Marina</a></li>
                            </ul>
                        </li>
                        <li><a href="http://stay-u-nique.com/social/">Social</a></li>
                        <li><a href="http://stay-u-nique.com/contact/">Contact and Location</a></li>
                        <li><a href="http://stay-u-nique.com/blog/">Blog</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="hangingDiv">
            <h2>New Div</h3>
        </div>
</body>
</html>

我想这就是你所期待的。

挂起bootstrap nav

1 个答案: