0
왼쪽 절반 반쯤 내 메뉴를 플로팅하는 방법을 원합니다. 그래서 nav bar의 중앙에있는 로고가 가운데에 떠있는 것처럼 보이고 그 다음 메뉴 항목의 절반이 메뉴 왼쪽에 있고 나머지 절반은 오른쪽에 있습니다.CSS 메뉴 왼쪽 절반 반반
이 순간에 코드 내 작업 디렉토리입니다 : http://theaamgroup.com/david-programs/brandit/
Basicly 그게 전부는 명확 메신저 여기 탐색 모음 만들기 위해 원하지 않는 경우 : 
봐이 같은 :
을
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; }
}
좋은 것 올바른 방향으로 날 가리 키도록 약간의 도움이됩니다. 미리 감사드립니다!
필요하지 않습니다으로
는 또한, 당신은
.nav에서float:left;을 제거 할 수 있습니다. 사이트로 연결되는 링크는 사이트 변경시 미래에 아무도 도움이되지 않습니다. – Phlume2 개의 톱 메뉴를 만들 것을 제안합니다. 1 개는 옳은 것을 위해 남겨 둡니다. – chen
메뉴에 로고를 추가 한 다음 상대적으로 'top : -30px' 또는 그 밖의 위치에 배치하십시오. – Blazemonger