Question

感谢您查看我的帖子。第一次寻求帮助。

我的问题是，无论我尝试什么，我都无法将元素集中在导航中。

这是我的代码推出的内容。

Here's what my code is putting out.

这就是我希望它做的事情。

Here's what I'd like it to do.

所以基本上，我想把内容放在中间col-sm-8＆amp;页面右侧的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{

}

我感谢任何帮助！

Answer 1

我会将您的导航代码更改为div标签，如下所示：

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="@Url.Action("Index", "Home")">

Answer 2

I found the solution myself using Flexbox. I'm posting it here for anyone who might find this in the future with the same problem.

我所做的只是将其添加到我上面的CSS中。

.PageLinks{
/* Makes the text larger */
font-size: 2.7em;
/* Sets the container to flex */
display: flex;
/* Centers the content horizontally */
justify-content: center;
/* Centers the content vertically */
align-items: center;
}

难以在Bootstrap 3 Nav中对齐元素

2 个答案: