부트 스트랩 모바일 헤더 정렬 문제

나는 단순해야한다고 생각하는 것을 시도하고 있지만 제대로 작동하지 못하는 것 같습니다. 내가 따라야하는 디자인이 있는데 제대로 정렬하지 못하는 것 같습니다.부트 스트랩 모바일 헤더 정렬 문제

이것은 내가보기에 원하는 것입니다.

내 문제는 내가 원하는 같은 것을 일치하지 않을 수 있습니다. 나는 여러 가지 다른 방법을 통해 갔다. 그리고 이것은 나의 최신 시도이고 일부 프론트 엔드 도움을 요청할 것이다. 홈 버튼은 단지 링크 일뿐입니다. 검색 버튼은 아래 예에서 아직 코딩되지 않은 검색 필드가있는 div를 엽니 다. 햄버거 메뉴가 다른 헤더 링크를 엽니 다.

여기에 내가있는 곳이 있으며 실제로 가까이에 있지 않은지 확인할 수 있습니다. 나는이 더 expereinced 프론트 엔드 개발자들에 대한 상당히 쉽게 추측하고 같이

http://jsbin.com/fucozulecu/edit?html,css,output

CSS

.navbar-nav { 
     float: none; 
     text-align: center; 
    } 

.navbar-nav li { 
    float: none; 
    display: inline-block; 
    width: 33%; 
    color: white; 
}

HTML

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="/"> 
        <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <span class="glyphicon glyphicon-home"></span> 
        </button> 
       </a> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle btn-search" data-toggle="collapse" 
         data-target=".navbar-search"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </li> 
     </ul> 
    </div> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</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><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    <div class="collapse navbar-collapse navbar-search"> 
     <ul class="nav navbar-nav navbar-search"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 

</nav>

어떤 도움을 주시면 감사하겠습니다.

출처

2016-11-28 Chris

부트 스트랩을 사용 중이므로 부트 스트랩 그리드 클래스를 추가하고 홈 버튼을 재배치했습니다.

<ul class="nav navbar-nav row"> 
    <li class="col-xs-4"> 
      <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <a href="/" class="nav-btn"><span class="glyphicon glyphicon-home"></span> </a> 
      </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle nav-btn" data-toggle="collapse" 
       data-target=".navbar-search"> 
      <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </li> 
</ul>

워킹 예를 http://jsbin.com/quxawovude/1/edit?html,css,output

출처

2016-11-29 04:36:26

은 대단히 노벨 감사 – Chris

부트 스트랩 모바일 헤더 정렬 문제

답변

관련 문제