0
我想要一種方法將菜單浮動一半左右。因此，導航欄中間的徽標就像中心一樣漂浮，然後一半的菜單項位於菜單的左側，另一半位於右側。CSS菜單浮動左半部分和右半部分
這是此刻的代碼我的工作目錄：http://theaamgroup.com/david-programs/brandit/
Basicly如果那是不明確的IM想使這個導航欄位置： 
是這樣的：
HTML
<!-- Carousel
================================================== -->
<div id="Carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="lib/img/carousel/slide-01.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-02.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-03.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<img src="lib/img/logos/Brandit_Logo.png" width="303" height="228" alt="Logos" class="MainLogo"/>
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"></a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
CSS
/* GLOBAL STYLES
-------------------------------------------------- */
body { padding-bottom: 40px; -webkit-text-size-adjust: none; -webkit-appearance: none; font-family: sans-serif; min-height: 416px; background-image: url('../img/bkg.png'); background-repeat: repeat; }
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; z-index: 5; margin-top: -85px; width: 100% }
.navbar-wrapper .navbar { }
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Downsize the brand/project name a bit */
.navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.navbar .nav > li > a { padding: 15px 20px }
/* Offset the responsive button for proper vertical alignment */
.MainLogo { position: absolute; left: 50%; right: 0; margin-top: -90px; margin-left: -152px; }
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 60px }
.carousel .container { position: relative; z-index: 10; }
.carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; }
.carousel .item { height: 500px }
.carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; }
.carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; }
.carousel-caption h1,
.carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.carousel-caption .btn { margin-top: 10px }
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper { margin-bottom: 0; width: auto; }
.navbar-wrapper { height: 50px; margin-top: -60px; }
.navbar-inner { margin: -20px 0; }
.navbar .nav > li { z-index: 0; }
.MainLogo { margin-top: -115px; }
.carousel .item { height: 500px }
.carousel img { width: auto; height: 500px; }
.marketing { margin-top: 30px; }
.featurette { height: auto; padding: 0; }
.featurette-image.pull-left,
.featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; }
}
@media (max-width: 767px) {
.navbar-inner { border-radius: 0; }
.btn-navbar { position: absolute; left: 85%; z-index: 5; }
.MainLogo { margin-top: -185px; }
.carousel .container { }
.carousel .item { height: 300px }
.carousel img { height: 300px }
.carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; }
.carousel-caption h1 { font-size: 30px }
.carousel-caption .lead,
.carousel-caption .btn { font-size: 18px }
.marketing .span4 + .span4 { margin-top: 40px }
.featurette-heading { font-size: 30px }
.featurette .lead { font-size: 18px; line-height: 1.5; }
}
一點幫助點我在正確的方向將是巨大的。提前致謝！
你可以在這裏發佈侑代碼，請需要取下
float:left;。到網站的鏈接可幫助您在網站更改時避開未來。 – Phlume我建議你創建2個頂層菜單，其中1個爲右邊的另一個。 – chen
將您的標誌添加到菜單中，然後將其相對位置放在頂部：-30px或其他東西。 – Blazemonger