html - columnas - La clase de la fila Bootstrap contiene margin-left y margin-right, lo que crea problemas

margin top bootstrap 3

Question

Estoy usando la clase Bootstrap '' row '' para alinear divs uno encima de otro, que funciona bien, pero

.row {
margin-left: -15px;
margin-right: -15px;
}

Lo que noté es que especifica los atributos margin-left y margin-right para ser -13px porque mi contenido se desplaza hacia la izquierda. entonces, lo que he hecho se agrega a otra clase de la siguiente manera:

.row-no-margin {
margin-left: 0px;
margin-right: 0px;
}

Esto resuelve el propósito, pero aún me gustaría saber si hay alguna razón específica para ''margin-left: -15px; ''. Y cuál es el mejor enfoque para resolver mi problema.

Answer 1

¿Estás usando Bootstrap 3? Mi versión del css tiene -15px, no -13px. En cualquier caso, simplemente hice lo que has hecho y sobrescribí el estilo. Creo que es porque la clase .container tiene un relleno de 15 píxeles a la izquierda y a la derecha, y este margen negativo en las filas extraerá ese contenido hasta el borde del contenedor.

Answer 2

El .row está destinado a ser utilizado dentro de un container . Como el container tiene relleno para ajustar el margen negativo en .row , las columnas de cuadrícula que se usan dentro del .row pueden ajustarse al ancho total del contenedor. Vea los documentos de Bootstrap: http://getbootstrap.com/css/#grid

Aquí hay un ejemplo para ilustrar: http://bootply.com/131054

Entonces, una mejor solución puede ser que coloque su .row dentro de un .container o .container-fluid

Answer 3

Estaba enfrentando este mismo problema e inicialmente, eliminé el margen derecho e izquierdo de la fila y eliminé el desplazamiento horizontal, pero no fue bueno. Luego, después de 45 minutos de inspección y búsqueda, descubrí que estaba usando fluido contenedor y estaba retirando el relleno y que su fila interna tenía márgenes negativos a la izquierda y a la derecha. Así que le di fluido de contenedo, se recuperó y todo volvió a la normalidad.

Si necesita eliminar el relleno de fluido del contenedor, no solo elimine el margen negativo izquierdo y derecho de cada fila en su proyecto, sino que presente una clase y utilícela en el contenedor que desee.

Answer 4

Puede usar fila líquida en lugar de remar, entonces no tendrá este problema. (para versiones anteriores de bootstrap)

No estoy seguro de las versiones recientes 3, de ninguna manera:

El problema es que la primera columna no debe tener media canaleta a la izquierda, y la última no debe tener media canaleta a la derecha. En lugar de utilizar algún tipo de clase .first o .last en esas columnas como lo hacen algunos sistemas grid, en su lugar configuran la clase .row para que tenga márgenes negativos que coincidan con el relleno de las columnas. Esto "tira" de las canaletas de la primera y la última columna, y al mismo tiempo la hace más ancha.

Para obtener más información sobre esto, ¿por qué el archivo bootstrap .row tiene un margen predeterminado a la izquierda de -30 px?

Answer 5

Utilicé div class = "form-control" en lugar de div class = "row"

Eso solucionó para mí.