Bootstrap MVC如何將一個品牌居中

Question

我想讓品牌在導航欄的中心，而我無法真正做到這一點。 我很樂意提供一些幫助。 感謝

<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:#f7e351; background-image:linear-gradient(#f7e351,#f7e351,#f7e351); border-color:#e7c02f;"> 
 
     <div class="container" style="background-color:#f7e351;"> 
 
      <div class="navbar-header" style="background-color:#f7e351;"> 
 
       <button type="button" style="background-color:#f7e351;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" > 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar "></span> 
 
       </button> 
 
       @Html.ActionLink("XXX", "Index", "XXX", new { area = "" }, new { @class = "navbar-brand" }) 
 
      </div> 
 
      @Html.ActionLink("Brand", "Brand", "Home", new { area = "" }, new { @class = "navbar-brand active" }) 
 
      <div class="navbar-collapse collapse"> 
 
       @Html.Partial("_LoginPartial2") 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

我創建了一個Bootply給你，讓你可以看到這個工作的可視化預期。

HTML：

<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:#f7e351; background-image:linear-gradient(#f7e351,#f7e351,#f7e351); border-color:#e7c02f;"> 
    <div class="container" style="background-color:#f7e351;"> 
     <div class="navbar-header" style="background-color:#f7e351;"> 
      <button type="button" style="background-color:#f7e351;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand">Center</a> 
     </div> 
     <a class="navbar-brand brand">Brand</a> 
    </div> 
</div> 

CSS：

.brand{ 
    position: absolute; 
    left: 48.5%; 
} 

詞重疊，因爲你不說出你的問題，其元素與navbar-brand類，你就想爲中心的，所以我做兩個都。

希望這會有所幫助。