erwartete ich brauchte Flexbox zu verwenden, um meine Navigation zum Zentrum und somit kam ich mit dem Follow-up:rechtfertigen Inhalt: Raum zwischen versagenden Elemente auszurichten, wie
.navbar-brand > img {
width: 100px;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.navbar-default .navbar-nav > li > a {
color: #464646;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
color: #727272;
}
.navbar-default .navbar-nav > li:not(.active) > a:before {
content: '';
position: absolute;
bottom: 0;
left: 30%;
right: 30%;
height: 1px;
background: #ed1c24;
opacity: 0;
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav > li > a:hover:before {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.navbar-default .navbar-nav > li:first-child > a {
font-weight: 700;
}
.navbar-default .navbar-nav > li.active > a {
background: #ed1c24;
color: #fff;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active > a:active {
background: #e0222a;
color: #fff;
}
.navbar-default .navbar-nav > li.active:hover > a:after {
bottom: 0;
}
.navbar-default .navbar-nav > li.active > a:after {
font-family: FontAwesome;
content: '\f078';
position: absolute;
bottom: 5px;
font-size: 0.6em;
/*opacity: 0.8;*/
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/* use flexbox to center align nav elements above 992px */
@media (max-width: 992px) {
.navbar-default .navbar-nav > li > a {
text-align: center;
}
.navbar-collapse {
max-height: 350px;
overflow-y: hidden;
}
}
@media (min-width: 992px) {
.navbar-default {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar-default {
min-height: 100px;
}
.navbar-default .navbar-right {
display: flex;
align-items: center;
}
.navbar-default > .container {
display: flex;
align-items: center;
justify-content: space-between;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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="navbar-brand">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo">
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="consulting.html">CONSULTING</a>
</li>
<li><a href="devices.html">Medical Devices</a>
</li>
<li><a href="">Servises</a>
</li>
<li><a href="">News</a>
</li>
<li><a href="">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>Wie Sie aus dem HTML sehen können, hat die .container zwei untergeordnete Elemente.
Ich habe folgende CSS auf das .container Element angewendet:
.navbar-default > .container{
display: flex;
align-items:center;
justify-content:space-between;
}
Das Problem ist space-between nicht die beiden untergeordneten Elemente des Behälters an den linken und rechten Rand des Behälters machen.
Das Verhalten, das ich will, ist, dass die beiden Kindelemente am linken und rechten Rand sein sollen, dies kann mit Floats erreicht werden, I. E., ich schweben ein Kind nach links und eins nach rechts.
Auch wenn Sie gelten flex-start und flex-end die Elemente an den Rand gezogen werden, aber mit flex-start und flex-end, werden beiden Elemente zu einer Seite gezogen werden. Daher muss ich space-between verwenden.
Kann mir jemand sagen, warum ist space-between nicht? Dieser Fehler verursacht auf meiner gesamten Website ein großes Alignment-Problem, bitte sagen Sie mir, was ich falsch mache.
Ich denke 'Inhalt:" „;' wird es nicht 'Raum-between' bewirken arbeiten. Versuche die Lösung zu finden. Dann lass es dich wissen. Bis zu dem Versuch, sich selbst oder eine andere zu finden, kann eine Lösung gefunden werden. – ketan
@ketan Überprüfen Sie das letzte Beispiel hier http://www.sketchingwithcss.com/samplchapter/cheatsheet.html, ich verwende diese Lösung für jetzt .. aber wirklich, Raum-zwischen sollte funktionieren! Ich weiß nicht, warum es nicht ist! –