css - tricks - Centre el navegador en Twitter Bootstrap
css tricks almanac (8)
Quiero poder centrar el medio de navegación muerto en una página y mantenerlo centrado en diferentes resoluciones. No quiero usar desplazamientos para empujarlos o dejarlos a la izquierda, ya que esto lo arruinaría en diferentes anchos de navegador. Este es el típico bar con el que me estoy metiendo, pero el ul siempre termina alineado a la izquierda.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Menu</a></li>
<li><a href="#">On Tap</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Surfwear</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container -->
</div><!-- navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
Código utilizado el sistema de arranque básico
<!--MENU CENTER`enter code here` RESPONSIVE -->
<div class="container-fluid">
<div class="container logo"><h1>LOGO</h1></div>
<nav class="navbar navbar-default menu">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><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" id="defaultNavbar2">
<ul class="nav nav-justified" >
<li><a href="#">Home</a></li>
<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><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- END MENU-->
Para Bootstrap v4 verifique esto:
https://v4-alpha.getbootstrap.com/components/pagination/#alignment
solo agregue clase a ul.pagination:
<nav">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Para cualquiera que necesite esto para Bootstrap 3, ahora es mucho más fácil.
La nueva clase nav-justified se puede usar para centrar todos los enlaces de la barra de navegación.
http://www.bootply.com/g3g125MLGr
<div class="navbar">
<ul class="nav nav-justified" id="myNav">
<li><a href="#">Home</a></li>
<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><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
O con un poco de CSS puede centrar solo la marca / logotipo, y mantener los enlaces izquierdo / derecho separados.
Posible duplicado de Modificar la barra de navegación de arranque de twitter . Supongo que esto es lo que estás buscando (copiado):
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
Como se indica en la respuesta vinculada, debe crear una nueva clase con estas propiedades y agregarla al div de navegación.
Prefiero esto :
<nav class="navbar">
<div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
<!-- this element is on the center of the nav, visible only on -md and -lg -->
<a></a>
</div>
<div class="container-fluid">
<!-- ...things with your navbar... -->
<div class="visible-xs visible-sm">
<!-- this element will be hidden on -md and -lg -->
</div>
<!-- ...things with your navbar... -->
</div>
</nav>
El elemento está perfectamente centrado, y estará oculto en algunos tamaños de pantalla (no había ningún lugar en -xs y -sm para mí, por ejemplo). Me sale la idea de la barra de navegación real de Twitter
Puedes hacer el ancho fijo de .navbar , luego establecer su margen izquierdo y derecho en auto .
.navbar{
width: 80%;
margin: 0 auto;
}
http://www.bootply.com/3iSOTAyumP en este ejemplo, no se pudo hacer clic en el botón para colapsar porque la marca .navbar estaba al frente.
http://www.bootply.com/RfnEgu45qR hay una versión actualizada donde se puede hacer clic en los botones de colapso.
.navbar-right {
margin-left:auto;
margin-right:auto;
max-width :40%;
float:none !important;
}
simplemente copie este código y cambie max-width que desee