Mam problem z wyśrodkowaniem zawartości na pasku nawigacyjnym ładowania początkowego. Używam bootstrap 3. Przeczytałem wiele postów, ale CSS lub użyte metody nie będą działać z moim kodem! Jestem naprawdę sfrustrowany, więc to moja ostatnia opcja. Każda pomoc będzie mile widziana!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
css
twitter-bootstrap
navbar
Nick ŁK
źródło
źródło
.navbar .navbar-collapse { line-height: 0px; }
Oryginalny post pytał, jak wyśrodkować zwinięty pasek nawigacyjny. Aby wyśrodkować elementy na normalnym pasku nawigacyjnym, spróbuj wykonać następujące czynności:
źródło
Jest inny sposób, aby to zrobić w przypadku układów, które nie muszą umieszczać paska nawigacyjnego w kontenerze i które nie wymagają przesłonięcia CSS ani Bootstrap.
Wystarczy umieścić div z
container
klasą Bootstrap wokół paska nawigacyjnego. Spowoduje to wyśrodkowanie łączy w pasku nawigacyjnym:Jeśli chcesz wyrównać zawartość ciała do środkowego paska nawigacyjnego, umieść tę treść również w
container
znaczniku Bootstrap .Nie każdy może korzystać z tego typu układu (niektóre osoby muszą zagnieździć sam pasek nawigacyjny wewnątrz
container
). Niemniej jednak, jeśli możesz to zrobić, jest to łatwy sposób na wyśrodkowanie łączy paska nawigacyjnego i ciała.Wyniki można zobaczyć na tej pełnej stronie JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/
Źródło: http://jsfiddle.net/bdd9U/229/
źródło
Ten kod działał dla mnie
źródło
W przypadku Bootstrap 4:
Po prostu użyj
MX-Auto wykona zadanie
źródło
Aktualizacja 2020 ...
Bootstrap 4
Centrowanie zawartości paska nawigacyjnego jest łatwiejsze - Bootstrap 4, a wiele scenariuszy centrowania wyjaśniono tutaj: https://stackoverflow.com/a/20362024/171456
Bootstrap 3
Inny scenariusz, który nie wydaje się być jeszcze odpowiedzi jest centrowanie zarówno na markę i NavBar linki . Oto rozwiązanie ..
http://codeply.com/go/1lrdvNH9GI
Zobacz także: Bootstrap NavBar z pozycjami wyrównanymi do lewej, środkowej lub prawej
źródło
z oficjalnej strony bootstrap (i prawie jak powiedział Eric S. Bullington.
https://getbootstrap.com/components/#navbar-default
przykładowy pasek nawigacyjny wygląda następująco:
aby wyśrodkować nawigację, to co zrobiłem:
css:
pracuj z class = "container" i navbar-right lub left, i oczywiście możesz zastąpić id klasą. :RE
źródło
Wygląda na to, że wszystkie te odpowiedzi dotyczą niestandardowego css na początku bootstrapu. Podana przeze mnie odpowiedź wykorzystuje tylko bootstrap, więc mam nadzieję, że przyda się tym, którzy chcą ograniczyć dostosowania.
Zostało to przetestowane z Bootstrap V3.3.7
źródło
to powinno działać
źródło
Użyj następującego HTML
I css
Zmodyfikuj zgodnie ze swoimi potrzebami
źródło
V4 BootStrap dodaje Center (justify-content-center) i Right Alignment (justify-content-end) zgodnie z: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
źródło