css - filas - ¿Cómo personalizar los anchos de columna de Bootstrap?

espacio entre columnas bootstrap 4

Question

Tengo esto, pero siento que 4 es demasiado grande para el ancho de mi barra lateral y 3 es demasiado pequeño (tiene que sumar 12).

  <div class="col-md-8">
  <div class="col-md-4">

Intenté esto pero no funciona:

  <div class="col-md-8.5">
  <div class="col-md-3.5">

¿Hay otra manera de obtener un resultado similar?

¡Gracias por tu ayuda!

Answer 1

Ciertamente podrías crear tus propias clases:

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

Haría esto antes de meterme con las columnas predeterminadas. Es posible que desee utilizar aquellos dentro de estos.

Probablemente también querrá colocarlos dentro de una declaración de consulta de medios para que solo se apliquen a tamaños de pantalla más grandes que los móviles.

Answer 2

Para ampliar la respuesta de @ isherwood, aquí está el código completo para crear anchos personalizados -sm- en Bootstrap 3.3

En general, desea buscar un ancho de columna existente (por ejemplo, col-sm-3 ) y copiar todos los estilos que se le aplican, incluidos los genéricos, en su hoja de estilo personalizada, donde define nuevos anchos de columna.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}

Answer 3

Para una cuadrícula de 12 columnas, si desea agregar la mitad de una columna (4,16667%) a cada ancho de columna. Esto es lo que haces.

Por ejemplo, para col-md- X , defina .col-md- X-5 con los siguientes valores.

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

Redondé ciertos valores.

En segundo lugar, para evitar copiar el código css del col-md- X original , utilícelos en la declaración de clase. Tenga cuidado de que sean agregados antes de los modificados. De esa forma, solo se anula el ancho.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

Finalmente, no olvide que el total no debe exceder las 12 columnas, que totalizan el 100%.

¡Espero que ayude!

Answer 4

Puedes personalizar bootstrap stylesheet, como en:

.col-md-8{
  width: /*as you wish*/;
}

Luego, configura la consulta de medios para eso también, como en:

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}

Answer 5

Puedes usar los propios mixins de columna de Bootstrap make-xx-column() :

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}