Hang div off bootstrap nav

Я пытаюсь повесить новый div с моей navbar с помощью bootstrap 3. Это то, что я пытаюсь сделать так, чтобы это выглядело. Любая помощь была бы оценена, мой код для nav ниже

<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>

1 ответ

  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>
    

    Я думаю, это то, чего вы ждали.