Hola Amigos,
Quisiera saber si hay alguna clase en Bootstrap así como en otros frameworks que quita los padding de los "col".
Ya que si hago esto:
<div class="col-xs-3"></div> <div class="col-xs-9"></div>
Me genera un padding:
padding-left: 15px; padding-right: 15px;
Quisiera saber si hay manera de con alguna clase eliminar estos padding, o se tiene que hacer manual.
Gracias
Respuestas
Según lo que he podido ver en los estilos de Bootstrap 3, no existe una clase específica para eliminar el padding que separa a las columnas. Así que tendrás que añadir ese estilo a mano.
Para no modificar todos los estilos del sitio web, podrías crear una clase especial llamada por ejemplo sinpadding y aplicarlo al elemento .container o .row para el que no quieres añadir padding. Algo así:
<div class="container sinpadding"> <div class="row"> <div class="col-xs-3"></div> <div class="col-xs-9"></div> </div> </div>
.sinpadding [class*="col-"] { padding: 0; }
@javiereguiluz
Puedes tratarlo así también
<div class="col-xs-3"> <div class="row"></div> </div> <div class="col-xs-9"> <div class="row"></div> </div>
@Ticguru
También puedes hacerte una descarga personalizado de bootstrap indicando cuales son los parámetros que quieres aplicar al framework. así evitaras la sobre-escritura de de sentencias. http://getbootstrap.com/customize/
@FreakSanchez
Sólo busca en el CSS:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right:15px; }
Quítale el paddding de 15px le pones 0 y listo ;)
@asmam16
solo busca en el css
html .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right:15px;
}
quitale el paddding de 15 le pones 0 y listo ;)
@asmam16
no me funciona ninguno de los trucos anteriores para eliminar el margen que trae por defecto bootstrap
@carmenlna
La clase no-gutters en el row
@alejoo2310