【发布时间】：2015-09-22 16:43:28
【问题描述】：
如何使下拉导航栏居中，并使其仍然响应？ 我已经尝试了我在这个网站和互联网上找到的几乎所有方法，但仍然无法解决我的问题，一种方法几乎可以解决我的问题，但让我的导航栏没有响应
body {
color: #ffffff;
background-color: #000000;
}
h1 {
color: white;
font-family: "orator std";
font-size: 44px;
letter-spacing: 0px;
line-height: 8px;
}
h2 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
line-height: 1px;
}
h3 {
color: white;
font-family: "orator std";
font-size: 14px;
letter-spacing: 1px;
margin-right: 100px;
margin-left: 100px;
}
h4 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
text-align: center;
}
h5 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
}
.thumbnail {
color: white;
background-color: #414141;
border-color: rgb(44, 44, 44);
}
.thumbnail .caption {
padding: 9px;
color: white;
margin-top: -14px;
}
.navbar-brand {
margin-top: 15px;
max-width: 30px;
padding: 0;
max-height: 30px;
}
.img-responsive {margin:0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner, .navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content:" ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -5px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img{
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}
.navbar-nav li{
position: relative
}
.navbar-nav li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="pull-left"><img src="images/logonav1.png"></a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><a href="#"><B><I>Home</B></I></a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I></a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Collection 1</a>
</li>
<li><a href="collection2.html"><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact us</a>
</li>
</li>
</ul>
</ul>
</div>
</nav> <!-- end navigation button-->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>【问题讨论】：
标签： css twitter-bootstrap center navbar centering