Tengo este, pero creo que 4 es demasiado grande para mi ancho de la barra lateral y 3 es demasiado pequeño (tiene que agregar hasta 12 años).

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

He intentado esto pero no funciona:

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

Hay otra manera de conseguir un resultado similar?

Gracias por su ayuda!

Cambiar a una de 16 o 24-diseño de la columna para obtener más flexibilidad: stackoverflow.com/questions/11591185/…
Es su sitio web responsive? Lo mejor es configurar el contenido fluya más fácilmente. Unos laterales que son siempre la misma anchura en la web de hoy.

OriginalEl autor AnthonyGalli.com | 2015-02-26

6 Comentarios

  1. 21

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

    En general, usted quiere buscar para una columna existente ancho (decir col-sm-3) y copiar todos los estilos que se aplican a él, incluidos los genéricos, a tu hoja de estilos personalizada, donde se definen los 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%;
        }
    }

    OriginalEl autor Tobia

  2. 15

    De 12 columnas de la cuadrícula, si desea añadir la mitad de una columna (4,16667%) para el ancho de cada columna. Esto es lo que debe hacer.

    Por ejemplo, para col-md-X, definir .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

    Doblé ciertos valores.

    En segundo lugar, evitar copiar el código de css a partir de la original col-md-X, utilizar en la declaración de la clase. Tenga cuidado que se debe agregar antes de su modificadas. De esa manera, sólo el ancho consigue anular.

    <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>

    Por último, no olvides que el total no debe exceder de 12 columnas, que suman un total de 100%.

    Espero te sirva de ayuda!

    OriginalEl autor Wawa Loo

  3. 6

    Sin duda puedes crear tus propias clases:

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

    Me gustaría hacer esto antes de que yo había lío con las columnas por defecto. Puede que desee utilizar aquellos en el interior de estos.

    Probablemente también quieren poner a aquellos dentro de una consulta de medios de instrucción, de modo que sólo se aplican por más grande que la pantalla del móvil tamaños.

    OriginalEl autor isherwood

  4. 4

    Puede utilizar Bootstrap de la propia columna de mixins make-xx-column():

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

    OriginalEl autor Antoni

  5. 2

    puede personalizar bootstrap hoja de estilos, como en:

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

    A continuación, establezca la consulta de medios de comunicación para que también, como en:

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

    OriginalEl autor Herman Nz

Dejar respuesta

Please enter your comment!
Please enter your name here