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类，你就想为中心的，所以我做两个都。

希望这会有所帮助。