¿Cómo puedo solucionar este problema?
Al agregar bordes a un div, el div no está centrada y
el span12 clase no está centrada.

Me gustaría centrar el div con las fronteras

<div class="row" >
   <div class="span12" style="border: 2px solid black">
      <div class="row">
         <div class="span4">
            1
         </div>
         <div class="span4">
            2
         </div>
         <div class="span4">
            3
         </div>
      </div>
   </div>
</div>
  • box-sizing: border-box;
InformationsquelleAutor the_martux | 2013-03-10

8 Comentarios

  1. 74

    Por desgracia, eso es lo fronteras hacer, son contados como parte del espacio un elemento ocupa. Permítanme presentarles frontera menos comúnmente conocido primo: outline. Es prácticamente idéntica a la frontera. La única diferencia es que se comporta más como box-shadow en que no ocupa espacio en su diseño y tiene que ser en todos los 4 lados del elemento.

    http://codepen.io/cimmanon/pen/wyktr

    .foo {
        outline: 1px solid orange;
    }
  2. 17

    Hay una propiedad en CSS llamado box-sizing. determina el ancho total de un elemento de la página. El valor predeterminado es content-box, que no incluye el relleno, margen o borde del elemento.

    Por lo tanto, si se establece un div tener width: 500px y 20px relleno a su alrededor, se tomará 540px en su sitio web (500 + 20 + 20).

    Esto es lo que está causando el problema. Bootstrap calcula establecer los anchos de las cosas como el ejemplo de arriba, y estas cosas no tienen fronteras. Desde Bootstrap encaja como un puzzle, añadir un borde a uno de los lados se obtiene un ancho total de 501px (siguiendo con el ejemplo anterior) y romper su diseño.

    La forma más sencilla de solucionar esto es para ajustar su box-sizing. El valor que se podría utilizar es box-sizing: border-box. Esto incluye el relleno y frontera en el cuadro de elementos. Usted puede leer más acerca de box-sizing aquí.

    Un problema con esta solución es que sólo funciona en IE8+. En consecuencia, si usted necesita el más profundo, es decir el apoyo que usted necesita para reemplazar el Bootstrap anchos para dar cuenta de su frontera.

    Para dar un ejemplo de cómo calcular un nuevo ancho, comience por comprobar el ancho que Bootstrap establece en su elemento. Digamos que es un span6 y tiene un ancho de 320px (esto es puramente hipotético, el ancho real de su span6 dependerá de su configuración específica de Bootstrap). Si desea agregar un solo borde en el lado derecho con un 20px relleno de allí, que iba a escribir este CSS en tu hoja de estilos

    .span6 {
      padding-right: 20px;
      border-right: 1px solid #ddd;
      width: 299px;
     }

    donde el ancho se calcula por:

    old width - padding - border

    • Esto debe ser aceptado respuesta.
    • «…le llevará hasta 540px en su sitio web». ¿Te refieres a la página web? Jeje +1 independientemente
  3. 9

    Dependiendo de qué tamaño usted quiere que su div a ser, se podrían utilizar Bootstrap del componente integrado thumbnail clase, junto con (o sin) el sistema de cuadrícula para crear un borde alrededor de cada uno de sus div elementos.

    Estos ejemplos en Bootstrap del sitio web muestra la facilidad de uso y la falta de necesidad para cualquier adicional especial CSS:

    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        ...
    </div>

    el cual se produce la siguiente div elementos de cuadrícula:

    Cómo utilizar frontera con Bootstrap

    o añadir algo de contenido adicional:

    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
           </p>
          </div>
        </div>
      </div>
    </div>

    el cual se produce la siguiente div elementos de cuadrícula:

    Cómo utilizar frontera con Bootstrap

    • Usando tu ejemplo de thumbnail yo era capaz de crear simples fronteras para div etiqueta. Mi upvote.
  4. 7

    Lo que otros han mencionado sobre el borde vs frontera cuadro es sin duda correcta. Usted todavía puede conseguir que esto funcione, sin tener que crear todas las clases personalizadas a pesar de que: http://jsfiddle.net/panchroma/yfzdD/

    HTML

    <div class="container">
    <div class="row" >
        <div class="span12">
           <div class="row">
            <div class="span4"> 1 </div>
            <div class="span4"> 2 </div>
            <div class="span4"> 3 </div>
            </div><!-- end nested row -->
        </div><!-- end span 12 -->
    
    </div> <!-- end row -->
    </div><!-- end container -->

    CSS

    .span12{
    border:solid 2px black;
    background-color:grey;  
    }  

    Buena suerte!

  5. 6

    Aunque probablemente no sea el correcta manera de hacerlo, algo de lo que yo he encontrado para ser una solución sencilla es simplemente el uso de un box-shadow en lugar de una frontera… Este no se rompa el sistema de la red. Por ejemplo, en tu caso:

    HTML

    <div class="container">
        <div class="row" >
            <div class="span12">
                <div class="row">
                    <div class="span4">
                        1
                    </div>
                    <div class="span4">
                        2
                    </div>
                    <div class="span4">
                        3
                    </div>
                </div>
            </div>
        </div>
    </div>

    CSS

    .span12{
        -moz-box-shadow: 0 0 2px black;
        -webkit-box-shadow: 0 0 2px black;
        box-shadow: 0 0 2px black;
    }

    El violín

    • Box-shadow fronteras son sin duda bastante limpio, pero no veo por qué te gustaría elegir el uso de esta en caja de tamaño en este caso. Cuadro-el tamaño no es sólo la forma correcta de hacerlo, pero también tiene más soporte de los navegadores. Box-shadow sombras parecen ser útil si usted está mirando para agregar múltiples fronteras sin marca adicional, pero, para mí, probablemente me evite el uso de ellos aquí!
    • Yo no he dicho que había elija sobre el cuadro de tamaño… Solo dijo que era una muy sencilla solución. 🙂
  6. 5

    Usted no puede agregar un borde a la duración, porque se va a romper la estructura, ya que de la forma en que la anchura es de calcular: ancho = frontera + relleno + ancho. Desde el contenedor es 940px y el span es 940px, la adición de 2px de la frontera (así 4px en total) hará que se vea descentrada. La solución es cambiar el ancho de incluir el 4px frontera (original – 4px) o dentro de otro div que crea el 2px frontera.

    • No hay necesidad para una solución dada una DOM de reestructuración o de uso de box-sizing: border-box.
  7. 1

    Si usted necesita un básico de la frontera alrededor de usted sólo tiene que utilizar bootstrap pozos.

    Por ejemplo, el código siguiente:

    <div class="well">Basic Well</div>

Dejar respuesta

Please enter your comment!
Please enter your name here