¿Cómo puedo personalizar la cuadrícula de columnas sólo por un elemento de div ?
Necesito de 5 columnas por fila (20% de ancho de cada uno).

Ejemplo:

<div id="parent">
    <div class="row">
        <div class="col-md-9">...</div>
        <div class="col-md-3">...</div>
    </div>
    <div class="row">
        <div class="col-md-2">...</div> <!-- 1 -->
        <div class="col-md-2">...</div> <!-- 2 -->
        <div class="col-md-2">...</div> <!-- 3 -->
        <div class="col-md-2">...</div> <!-- 4 -->
        <div class="col-md-2">...</div> <!-- 5 -->
    </div>
</div>

Estoy usando Bootstrap 3.1.1

InformationsquelleAutor Hamidreza | 2014-05-27

6 Comentarios

  1. 2

    Una solución parcial sería la descrita aquí (agregando un desplazamiento).

    Sin embargo, si quieres hacerlo bien, vas a tener que crear nuevas clases para reemplazar Bootstrap del predeterminados con el ancho apropiado. A continuación, agregue esta clase para cada columna.

    .5-col-grid {
        width: 20%;
    }

    Además puede establecer CSS @de apoyo a los medios si desea que el 100% de la anchura de las pequeñas resoluciones de pantalla.

  2. 1

    Usted realmente no tiene que, en la actualización del Bootstrap. Usted puede descargar una costumbre Bootstrap 3 construir, especificando el número de columnas deseadas con el @grid-configuración de columnas.

    Ir a url

    http://getbootstrap.com/customize/

    desplácese hacia abajo para «el sistema de la red» e introduzca sus propios valores de la costumbre de sistema de la red que usted desea.

    • La persona que hace la pregunta, dijo que «sólo por un elemento», por lo que no para todo su sitio.
  3. 0

    Usted puede crear su propio conjunto de reglas, teniendo Boostrap la forma de estructuración de su cuadrícula como referencia:

    .col-custom-five {
        position: relative;
        float: left;
        width: 20%;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
    }

    Generalmente de cinco columnas que no funcionan bien en muy pequeño dispositivo. Así que lo que suele hacer es añadir un común xs declaración junto con él. Algo así como:

    <div class="row">
        <div class="col-custom-five col-xs-6">...</div> <!-- 1 -->
        <div class="col-custom-five col-xs-6">...</div> <!-- 2 -->
        <div class="col-custom-five col-xs-6">...</div> <!-- 3 -->
        <div class="col-custom-five col-xs-6">...</div> <!-- 4 -->
        <div class="col-custom-five col-xs-6">...</div> <!-- 5 -->
    </div>

    EDICIÓN:

    También puede generar todas las reglas personalizadas directamente desde Bootstrap del sitio web así: http://getbootstrap.com/customize/#grid-system

    • Gracias pero no es sensible.
    • Es. Todo depende de lo que quieras hacer dentro de cada div demasiado, y de cómo usted quiere que actúan en diferentes puntos de interrupción. Todo está abierto para la personalización
  4. 0

    Si quieres crear tu propia columna, entonces usted necesita para dar el div con la clase y, a continuación, el estilo de ella.

    Necesita especificar la anchura personalizada y, a continuación, asegúrese de que el flotador a la izquierda y agregar relleno.

    Por ejemplo:

    CSS:

    .custom-col {
    
      width:20%;
      float:left;
      padding-left:15px;
      padding-right:15px;
    
    }

    HTML:

    <div class="custom-columns>
      <div class="container>
        <div class="row">
          <div class="custom-col">
            <p>Sample text</p>
          </div>
          <div class="custom-col">
          <p>Sample text</p>
          </div>
          <div class="custom-col">
          <p>Sample text</p>
          </div>
          <div class="custom-col">
          <p>Sample text</p>
          </div>
          <div class="custom-col">
          <p>Sample text</p>
          </div>
        </div>
      </div>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here