感谢您查看我的帖子。第一次寻求帮助。
我的问题是，无论我尝试什么，我似乎都无法将元素置于导航中心的中心。
这是我的代码输出的内容。
这是我希望它做的事情。
所以基本上，我想将内容放在中间的 col-sm-8 和页面右侧的 col-sm-2以及。
这是我的 HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Working Title</title>
</head>
<body>
<!-- The Navbar & row-->
<nav class="navbar navbar-inverse row">
<div class="container-fluid">
<!-- The logo Img. -->
<div class="col-sm-2 L-sm-2">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Img/logo.jpg" style=""></a>
</div>
</div>
<!-- Begin Page Links. This can change the text size also. -->
<ul class="nav navbar-nav col-sm-8 PageLinks">
<!-- Play! -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Play! <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PvE</a></li>
<li><a href="#">PvP</a></li>
</ul>
</li>
<!-- About -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">The Game</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Monster Manual</a></li>
</ul>
</li>
<!-- Forum -->
<li><a href="#">Forum</a></li>
<!-- Statistics -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Statistics <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">General</a></li>
<li><a href="#">PvE</a></li>
<li><a href="#">PvP</a></li>
</ul>
</li>
<!-- Armory -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Armory <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PC Armory</a></li>
<li><a href="#">PC Builder</a></li>
</ul>
</li>
<!-- Help! -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
<!-- The sign up / sign in stuff. -->
<div class="nav navbar-nav navbar-right R-sm-2 col-sm-2">
<ul class="">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li><br>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
</div>
</div>
</nav>
这是我的 CSS
* {
/* Makes sure that the padding and border are included in the total width and height of the elements in the Grid. */
box-sizing: border-box;
}
/* Setting the heignt for the logo in the nav bar. */
nav a img {
max-height: 100px;
width: auto;
}
/* Setting the height for the columns in the nav. */
nav .col-sm-2, .col-sm-8{
height: 140px;
}
/* Setting the navbar height & the opacity */
.navbar{
height: 140px;
opacity: .9;
}
/* Setting the left border for the Sign up / Sign in area. */
.R-sm-2{
border-left: 2px solid white;
line-height: 3.3;
}
/* Setting the left border for the Sign up / Sign in area. */
.L-sm-2{
border-right: 2px solid white;
}
.PageLinks{
}
感谢您的帮助!
最佳答案
我会将您的导航标签更改为这样的 div 标签:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="@Url.Action("Index", "Home")">
关于html - 在 Bootstrap 3 Nav 中对齐元素时遇到困难，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47917250/