query - position css
Cómo deshabilitar el apilamiento de pestañas justificadas de arranque en pantallas pequeñas (9)
He visto esta publicación , pero al ser un usuario nuevo no puedo comentar para pedir una aclaración.
Estoy usando las pestañas de navegación justificadas en Bootstrap y no quiero que se apilen en pantallas pequeñas, ya que solo tengo 2 pestañas. Me gustaría que permanezcan uno al lado del otro, solo encoge para que quepan en la pantalla. Esto es lo que tengo:
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
<li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ratings">This is a rating section</div>
<div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>
Como la publicación relacionada sugiere utilizar consultas de medios, parece que no puedo hacer que funcione. Intenté configurar lo siguiente para orientar solo a pantallas pequeñas:
@media (max-width: 768px) {
.nav-justified > li {display: table-cell;}
}
No estoy seguro de lo que estoy haciendo mal por lo que cualquier ayuda es muy apreciada.
Además de james answer, si no quieres limitar el ancho máximo a 768px, puedes hacer lo siguiente:
@media (min-width: 0px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
}
¿Debo evitar el uso de! Important en CSS?
Si prefiere evitar el uso de !important en CSS, pegue el código después de la inclusión de bootstrap.
El problema con algunas de las otras soluciones es que las pestañas perderán sus bordes y otros elementos de diseño. Las siguientes consultas de medios aseguran más completamente que las pestañas coincidan en pantallas condensadas y más amplias:
@media (max-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
}
Hay una forma muy simple de evitar el apilamiento:
CSS:
.nav li {
display:table-cell !important;
}
Busqué esto y me molestaron las respuestas relacionadas con el bootstrap de compilación personalizado (uso CDN) y LESS (que no uso)
Esto funciona genial para mí ...
Intenté editar la respuesta de @pjb porque está incompleta. Pero mi edición fue rechazada, dos veces, ya que aparentemente es ''incorrecta''. Aunque Plunker tendería a estar en desacuerdo ...
Este es el original que muestra que el borde inferior de las pestañas activas se muestra cuando se condensa
http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview
Y esta versión, donde claramente no se muestra
http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview
@media (max-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff !important;
}
}
Intente agregar col-xs-6 antes de los enlaces
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
<div class="col-xs-6">
<li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
</div>
<div class="col-xs-6">
<li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</div>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ratings">This is a rating section</div>
<div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>
puedes verlo aquí Bootply
Mucho depende de si desea mantener el bootstrap predeterminado intacto y simplemente agregar su tema personalizado en la parte superior. Muchas veces, esto tiene sentido, ya que es posible que desee tener pestañas apiladas para dispositivos móviles más adelante en la pista si la lista de pestañas crece a 3 o 4, etc. Lo que haría es agregar una nueva clase a la ul- custom. no apiladas "y luego agrega este CSS a tu hoja de estilo:
.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a,
.nav-justified.custom-not-stacked>.active>a:focus,
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}
Otra solución simple es agregar la clase de flex al elemento <ul> lugar de nav-justified
.just {
display: flex;
flex-flow: row nowrap;
}
.just > li {
flex: 1 auto;
text-align: center;
white-space: nowrap;
}
jsFiddle
Tenga en cuenta que en el caso de muchas pestañas, algunas de ellas pueden ir detrás de su pantalla. Para evitar esto, puede agregar wrap lugar de nowrap al flex flow . De esta forma, se apilarán, pero solo en caso de que las cosas normalmente se ubiquen detrás de la pantalla, lo que significa que el punto de corte para el apilamiento de warp es más pequeño que en el caso de nav-justified de nav-justified . Adelante, use el row wrap en mi violín y cambie el tamaño de la pantalla para ver de qué estoy hablando.
Y editar la respuesta de pjb, incluso mantiene el estilo predeterminado para la barra de navegación justificada de bootstrap.
@media (max-width: 768px){
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
border-bottom: 1px solid #ddd !important;
border-radius: 4px 4px 0 0 !important;
margin-bottom: 0 !important;
}
.nav-justified > li.active > a {
border-bottom: 1px solid transparent !important;
}
}
LESS - Bootstrap
Esta es la respuesta de @pjb convertida en MENOS. Actualmente estoy usando bootstrap.less, así que debajo está el estilo que implementé.
@media (max-width: @screen-xs-max) {
.nav-justified {
> li {
display: table-cell;
width: 1%;
> a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
border-radius: @border-radius-base @border-radius-base 0 0 !important;
margin-bottom: 0 !important;
}
}
}
}