垂直对齐Bootstrap中的多个下拉列表
问题：
垂直对齐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占位符对齐。
2 个答案:
答案 0 :(得分：1)
为您解决方案是创建一个新的＆＃39; li＆＃39;可见性：隐藏且与第一个导航的高度相同：
<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>
答案 1 :(得分：0)
由于您知道图片为100px height且padding周围为10px，因此您可以应用margin-top: 40px;使其垂直居中。
必须有更好的方法，但它的工作原理如下。
.navbar-right {
margin: 40px 0 0;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？