부트 스트랩 Navbar 정렬

내 질문에 대한 답변이 정말로 간단하지만 유감 스럽지만 여기에 있습니다. 그래서 이미지와 탐색 막대를 웹 페이지의 헤더에 넣고 이미지가 왼쪽에 있고 탐색 막대가 오른쪽에 있도록 정렬해야합니다. 나는 "float"속성을 변경해 보았으나 탐색 막대와 이미지는 여전히 서로 쌓여 있습니다. 아래의 이미지는 내가 의미하는 바를 보여줍니다. 여기 부트 스트랩 Navbar 정렬

내 HTML 코드입니다 : 여기

<header> 
    <img src="White Logo.png" id="logo"/> 
    <div class="container"> 
    <nav class="navbar navbar-default" id="mNavbar"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="services.html">Services</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </div> 
    <a href="#start"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a> 
</header>

는 이미지 (로고가 될 것입니다 어디에 상자는) 다음 official Bootstrap documentation에서 언급 한 바와 같이 Image 1

출처

2016-12-09 name234

링크 된 이미지는 흰색 상자 자체가 아니라 원하는 것의 예입니다. – MattD

@MattD 그래, 이미지가 내가 원하는 것을 보여주고있다. – name234

맞아요, 사람들이 당신이 그것을 얻는 방법의 모범을 조롱하도록 돕고 싶다면 브랜딩을 위해 사용할 이미지를 포함시켜야합니다. 당신은 이것을 "이미지"라고 부르며, 이것은 브랜드 섹션에서 당신이 원하는 이미지라고 믿게합니다. 그러나 그것은 실제로 당신이 원하는 것의 예입니다. 그것은 도움이되지 않습니다. – MattD

, 당신은 텍스트를 교체해야 선택한 이미지와 함께 navbar-brand에 사용됩니다.

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="Brand" src="..."> 
     </a> 
    </div> 
    </div> 
</nav>

이미지 태그는 이미지를 배치하려는 위치입니다.

당신의 메뉴 바 마크 업의 상단은 다음과 같이한다 : 당신이 거기에 브랜드에 대한 텍스트를 볼

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div>

당신이 당신의 이미지를 배치 볼 수있는 곳입니다.

출처

2016-12-09 15:17:43 MattD

나는 CSS를 망칠 후에 그 전에 그것을 시도했다 고맙다, 나는 그것을 작동하게했다. 혼란스러워서 죄송합니다. – name234

모두 좋다. 부트 스트랩의 현재 버전에있는 navbar는 매우 실망 스럽습니다. – MattD

부트 스트랩 Navbar 정렬

답변

관련 문제