1
Problem:Vertically mehr Dropdown ausrichten in Bootstrap
Vertically mehr Drop-Down in die Bootstrap auszurichten. Im Moment ist die linke Seite der Navigationsleiste korrekt ausgerichtet, aber nicht die rechte. Schätzen Sie jedes Feedback, wie Sie argumentieren sollten, um dies zu lösen.
Minimal Arbeitsbeispiel (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/
Output:
gewünschte Ausgabe:
Herstellung des rechten Navigation vertikal in der Mitte, um mit dem 450x100 Platzhalter auszurichten.
