ブートストラップヘッダーの修正

Question

私の問題は、navbar-right要素がnavbar-brand要素と揃っていないことです。私はこれに助けが必要です。このご希望の結果である私はそれらを揃えたいけど要素は、この

header.html

<header> 
     <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" 
          data-target=".navbar-collapse"> 
         <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="#"> 
         {{ Html::image('assets/images/logo.png') }} 
        </a> 
       </div> 
      </div> 

      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class=""><a href="#">About Us</a></li> 
       </ul> 
      </div> 


     </div> 
    </header> 

のstyle.css

.navbar-text > a { 
    color: inherit; 
    text-decoration: none; 
} 
body { 
    padding-top: 70px; 
    padding-bottom: 100px; 
} 

.navbar-default{ 
    background-color:#005b96; 
    border-color:#005b96; 
    font-family: 'Roboto', sans-serif; 
    font-size: 15px; 
    position:absolute; 
    top: 25px; 
    left:100px; 
    right:100px; 

} 
.navbar-brand { 
    width: 100px; 
    height: 50px; 
} 

.navbar-default .navbar-brand > img { 
    width: 130px; 
    height:50px; 
    position: absolute; 
    top: 5px; 
    padding-top:5px; 
    padding-bottom: 5px; 
    margin-left: auto; 
} 

.row{ 
    position:absolute; 
    top: 25px; 
    left:115px; 
    right:115px; 
} 
.panel{ 
    margin-top:100px; 
} 

Answer 1

Example。問題は実際にあなたのマークアップである。あなたの.containerも

<div class="navbar-collapse collapse"> 
...... 
</div> 

ので、同じようにラップする必要があります。

<header> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="#"> 
      {{ Html::image('assets/images/logo.png') }} 
     </a> 
     </div> 

     <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li class=""><a href="#">About Us</a></li> 
     </ul> 
     </div> 

    </div> 
    </div> 
</header> 

Answer 2

ようなものでしょうか？

.navbar-collapse.collapse { 
    position: absolute; 
    right: 50px; 
    top: 26px; 
} 

はまた、私は分768のピクセルのメディアクエリでそれを置く：http://screencast.com/t/5drms5A0f

はい場合は、ここで私がいることを達成する方法です。