¿Puedo dar el col-md-1.5 en bootstrap?

Quiero ajustar las columnas en Twitter Boοtstrap.

Sé que en bootstrap hay una cuadrícula de 12 columnas. ¿Hay alguna forma de manipular las cuadrículas para tener 1.5 3.5 3.5 3.5 en lugar de 3 3 3 3?

Como dijo correctamente @ bodi0 , no es posible. Tiene que ampliar el sistema de cuadrícula de Bootstrap (puede buscar y encontrar varias soluciones, aquí hay un ejemplo de 7 columnas) o usar filas anidadas, por ejemplo, http://bootply.com/dd50he9tGe .

En el caso de filas anidadas, es posible que no siempre obtenga el resultado exacto sino uno similar

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

La nube también simplemente anula el ancho de la columna ...

<div class="col-md-1" style="width: 12.499999995%"></div>

Dado que col-md-1tiene un ancho de 8.33333333%; simplemente multiplica 8.33333333 * 1.5 y configúralo como tu ancho.

in bootstrap 4, también tendrá que anular la propiedad flex y max-width:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

La respuesta corta es no (técnicamente puede dar el nombre de la clase que desee, pero esto no tendrá ningún efecto, a menos que defina su propia clase CSS, y recuerde, no hay puntos en el selector de clases). La respuesta larga es nuevamente no , porque Bootstrap incluye un primer sistema de cuadrícula de fluido móvil y receptivo que escala adecuadamente hasta 12 columnas a medida que aumenta el tamaño del puerto de visualización o dispositivo.

Las filas deben colocarse dentro de un .container(ancho fijo) o .container-fluid(ancho completo) para una alineación y relleno adecuados.

• Utilice filas para crear grupos horizontales de columnas.
• El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser elementos secundarios inmediatos de las filas.
• Las clases de cuadrícula predefinidas como .rowy .col-xs-4están disponibles para crear rápidamente diseños de cuadrícula. También se pueden usar menos mixins para diseños más semánticos.
• Las columnas crean medianiles (espacios entre el contenido de la columna) mediante el relleno. Ese relleno se compensa en filas para la primera y la última columna mediante un margen negativo en .rows.
• Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres .col-xs-4.
• Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales, como una unidad, se ajustará a una nueva línea.
• Las clases de cuadrícula se aplican a dispositivos con anchos de pantalla mayores o iguales que los tamaños de los puntos de interrupción y anulan las clases de cuadrícula dirigidas a dispositivos más pequeños. Por lo tanto, por ejemplo, aplicar cualquier .col-md-*clase a un elemento no solo afectará a su estilo en dispositivos medianos sino también en dispositivos grandes si una .col-lg-*clase no está presente.

Una posible solución a su problema es definir su propia clase CSS con el ancho deseado , digamos que .col-half{width:XXXem !important}luego agregue esta clase a los elementos que desee junto con las clases CSS originales de Bootstrap.

Bootstrap 4 usa flex-box y puede crear sus propias definiciones de columna

Esto está cerca de 1.5, ajuste a sus propias necesidades.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Crea nuevas clases para sobrescribir el ancho. Consulte jFiddle para conocer el código de trabajo.

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Como otros mencionaron en Bootstrap 3, puede usar técnicas de anidar / incrustar.

Sin embargo, se está volviendo más obvio usar una característica bastante impresionante de Bootstrap 4 ahora. simplemente tiene la opción de usar las col-{breakpoint}-autoclases (por ejemplo col-md-auto) para hacer que las columnas se dimensionen automáticamente en función del ancho natural de su contenido. mira esto por ejemplo

De acuerdo con la respuesta de Rex Bloom, escribí un ayudante de arranque:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Bootstrap tiene compensaciones de columna, por lo que si desea columnas con el mismo ancho sin especificar el tamaño, use esto.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Consulte también este enlace https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Esto no es Bootstrap Standard para dar col-md-1.5 y no puede editar bootstrap.min.css porque no es la forma correcta. puedes crear como este http://www.bootply.com/125259

puede usar este código dentro de col-md-3, col-md-9

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Esta pregunta es bastante antigua, pero la hice de esa manera (en TYPO3).

En primer lugar, he creado una clase css accesible que puedo elegir en cada elemento de contenido manualmente.

Luego, hice un elemento externo de tres columnas con 11 columnas (1-9-1), finalmente, modifiqué el ancho de columna de la primera y tercera columna con CSS a 12.499999995%.