英文:
How do I align links to left and right in a Bootstrap 3 navigation in MVC 5
问题
我正在尝试使我的导航栏看起来像这样。然而，无论我对基本布局代码进行了什么更改，文本似乎都无法对齐到屏幕的右侧。
我的HTML代码如下：
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@if (Session["Logged_In"] == null)
{
<li>@Html.ActionLink("Home", "Index", "OUsers")</li>
<li class="navbar-right">@Html.ActionLink("Create", "Create", "OUsers")</li>
<li class="navbar-right">@Html.ActionLink("Login", "Login", "OUsers")</li>
}
@if (Session["Logged_In"] != null)
{
<li>@Html.ActionLink("Home", "LoggedIndex", "OUsers")</li>
<li>@Html.ActionLink("Delete Account", "DeleteProfile", "OUsers")</li>
<li>@Html.ActionLink("Edit Profile", "EditProfile", "OUsers")</li>
<li style="float:right">@Html.ActionLink("Sign Out", "SignOut", "OUsers")</li>
}
</ul>
</div>
这并不是完整的布局代码，尽管如此，这是我实际编辑过的部分，似乎与文本对齐相关。此外，我的 "navbar-right" 类仅包含 float: right; 和 text-align: right;。
奇怪的是，当我检查网站上的登录和创建操作链接时，“navbar-right” 类被应用，但没有对齐更改。值得注意的是，我尝试将CSS类放在actionlink参数中，但没有任何变化，我还尝试了一个新的包含navbar-right的div，但这似乎将登录对齐到Home actionlink下面，这对我来说也很奇怪。
英文:
I'm trying to get my Navigation Bar to look like this. However the text won't align to the right side of the screen seemingly no matter what changes I make to the base layout code.
My html code is as follows:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@if (Session["Logged_In"] == null)
{
<li>@Html.ActionLink("Home", "Index", "OUsers")</li>
<li class="navbar-right">@Html.ActionLink("Create", "Create", "OUsers")</li>
<li class="navbar-right">@Html.ActionLink("Login", "Login", "OUsers")</li>
}
@if (Session["Logged_In"] != null)
{
<li>@Html.ActionLink("Home", "LoggedIndex", "OUsers")</li>
<li>@Html.ActionLink("Delete Account", "DeleteProfile", "OUsers")</li>
<li>@Html.ActionLink("Edit Profile", "EditProfile", "OUsers")</li>
<li style="float:right">@Html.ActionLink("Sign Out", "SignOut", "OUsers")</li>
}
</ul>
</div>
This isn't the full Layout code granted however it's what I've actually edited and seems relevant to text alignment. Also my "navbar-right" class consists of only float: right; and text-align: right;
The strange thing is that when I inspect the Login and Create actionlinks on the website the "navbar-right" class is applied yet there is no alignment changed. It may be worth noting I tried putting the css class within the actionlink parameters and nothing changed and I also attmepted a new division with navbar right but that seemed to align Login under the Home actionlink which was also bizarre to me.
答案1
得分: 2
看起来你正在使用Bootstrap 3。那么这将起作用：
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>
</div>
英文:
It seems you are using Bootstrap 3. Then this will work
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
答案2
得分: 0
navbar-nav类具有float:left属性，它会将所有导航都对齐到左侧
尝试覆盖
英文:
The navbar-nav class have float:left property with it which align all the nav to left side
try to override
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论