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 你想要居中的元素所以我做了两个。
希望这对您有所帮助。
我正在尝试使品牌位于导航栏的中央,但我真的做不到。 我很乐意提供一些帮助。 谢谢
<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 你想要居中的元素所以我做了两个。
希望这对您有所帮助。