Bootstrap MVC 如何让品牌居中

Bootstrap MVC How to center a brand

我正在尝试使品牌位于导航栏的中央,但我真的做不到。 我很乐意提供一些帮助。 谢谢

<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>

我已经为您创建了一个 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 class 你想要居中的元素所以我做了两个。

希望这对您有所帮助。