问题:
在 Bootstrap 中垂直对齐多个下拉菜单。现在，导航栏的左侧已正确对齐，但右侧未正确对齐。感谢任何反馈，您应该如何推理才能解决此问题。
最小工作示例 (MWE):
<head>
<meta charset="utf-8">
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Loading Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Fonts Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap Languages -->
<link href="https://webbutveckling-supervisor.c9users.io/sas/assets/css/languages.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--<link href="assets/css/style.css" rel="stylesheet">-->
<!-- Favicon -->
<link rel="shortcut icon" href="asssets/images/favicon.ico">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<style>
html, body {
height: 100%;
min-height: 100%;
background-color: #eae8db;
padding-top: 30px;
}
/*=========== Positioning ============*/
.container {
width: 80%;
min-height: 100%;
padding: 0px 0px 75px 0px;
margin: 0 auto;
}
/*============ Navigation ============*/
.navbar {
height: 100%;
background-color: blue;
}
.nav li {
display:inline-block;
float:none;
margin:0;
vertical-align:middle;
}
.navbar-nav {
background-color: red;
}
.navbar-right {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar" role="navigation">
<!-- Collect the nav links -->
<ul class="nav navbar-nav">
<li><a href="/"><img src="http://placehold.it/450x100" alt=""></a></li>
<li><a href="/">Boka resa</a></li>
<li><a href="/">Erbjudanden</a></li>
<li><a href="/">Resmål</a></li>
<li><a href="/">Företag</a></li>
<li><a href="/">Charter</a></li>
<li><a href="/">Kundtjänst</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Logga ut"><i class="fa fa-fw fa-lock"></i> Logga ut <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/"><i class="fa fa-fw fa-paint-brush"></i> Test 1</a></li>
<li><a href="/"><i class="fa fa-fw fa-shopping-cart"></i> Test 2</a></li>
</ul>
</li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Språk"> <i class="lang-sm" lang="sv"> </i> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><span class="lang-sm lang-lbl-full" lang="sv"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ar"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="be"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cs"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="da"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="el"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="et"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fi"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ga"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="hr"></span></li>
</ul>
</li>
<li><a href="/"><i class="fa fa-fw fa-search"></i></a></li>
</ul>
</nav>
<!-- / Navigation -->
</div>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/flat-ui-pro.js"></script>
<!-- JS for experiment -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/application.js"></script>
</body>
</html>
https://jsfiddle.net/58q66kr6/
输出:
期望的输出:
将右侧导航垂直放置在中间，以便与 450x100 占位符对齐。
最佳答案
您的解决方案是创建一个新的“li”，其可见性:隐藏且与第一个导航高度相同:
<head>
<meta charset="utf-8">
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Loading Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Fonts Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap Languages -->
<link href="https://webbutveckling-supervisor.c9users.io/sas/assets/css/languages.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--<link href="assets/css/style.css" rel="stylesheet">-->
<!-- Favicon -->
<link rel="shortcut icon" href="asssets/images/favicon.ico">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--\[if lt IE 9\]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<!\[endif\]-->
<style>
html, body {
height: 100%;
min-height: 100%;
background-color: #eae8db;
padding-top: 30px;
}
/*=========== Positioning ============*/
.container {
width: 80%;
min-height: 100%;
padding: 0px 0px 75px 0px;
margin: 0 auto;
}
/*============ Navigation ============*/
.navbar {
height: 100%;
background-color: blue;
}
.nav li {
display:inline-block;
float:none;
margin:0;
vertical-align:middle;
}
.navbar-nav {
background-color: red;
}
.navbar-right {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar" role="navigation">
<!-- Collect the nav links -->
<ul class="nav navbar-nav">
<li><a href="/"><img src="http://placehold.it/450x100" alt=""></a></li>
<li><a href="/">Boka resa</a></li>
<li><a href="/">Erbjudanden</a></li>
<li><a href="/">Resmål</a></li>
<li><a href="/">Företag</a></li>
<li><a href="/">Charter</a></li>
<li><a href="/">Kundtjänst</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="visibility:hidden;height:130px;width:0px;"></li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Logga ut"><i class="fa fa-fw fa-lock"></i> Logga ut <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/"><i class="fa fa-fw fa-paint-brush"></i> Test 1</a></li>
<li><a href="/"><i class="fa fa-fw fa-shopping-cart"></i> Test 2</a></li>
</ul>
</li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Språk"> <i class="lang-sm" lang="sv"> </i> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><span class="lang-sm lang-lbl-full" lang="sv"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ar"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="be"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cs"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="da"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="el"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="et"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fi"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ga"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="hr"></span></li>
</ul>
</li>
<li><a href="/"><i class="fa fa-fw fa-search"></i></a></li>
</ul>
</nav>
<!-- / Navigation -->
</div>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/flat-ui-pro.js"></script>
<!-- JS for experiment -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/application.js"></script>
</body>
</html>
关于html - 在 Bootstrap 中垂直对齐多个下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36388296/