[Resuelto] Botones espacio de abajo bootstrap

[bgnumis]

Hola tengo dos dudas con botones tengo el siguiente código:

Código (php) [Seleccionar] Expandir



<div class="container" margin: auto; >
    <div class="row">  
        <div  class="col-lg-12 text-center">
       

<a href="dos.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080;'   class="btn btn-default  boton" ><strong>Búsqueda </strong>  <br> <strong>Ofic/</strong> <strong><br>Registro</strong>  <br> <strong>Visitas </strong></a>

<a href="ultimavisita.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080; '  class="btn btn-default  boton " > <strong>Última Visita </strong></a>

   <a href="regis.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080;'  class="btn btn-default  boton" ><strong>Histórico</strong>  <br> <strong>Visitas </strong> </a>
   
    <a href="exp.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080;'  class="btn btn-default   boton" ><strong>Ficha</strong>  <br> </a>
   
      <a href="fic.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080 '  class="btn btn-default  boton" ><strong> Insertar</strong> </a>
   
     <a href="fils.php" target="_parent" style='width:100px; height:100px; cursor:pointer; background-color:#e7e7e7; color: #000080;'  class="btn btn-default  boton" ><strong>Cartera </strong> </a>


</div>
</div>
</div>





La primera pregunta es: Como es responsive design, cuando visualizo ese código en la web se ven los seis botones en línea (en una línea) y el espacio entre botón y botón se ve, y es suficiente. El tema es que al verlo en el móvil se ven tres botones arriba y tres debajo. Pero aunque sigue habiendo separación a la derecha de cada botón, entre el boton uno, en la primera fila sería por decirlo el 1,2,3 los botones  4,5,6 están pegados por debajo de los 1,2,3 y no hay manera de hacer el mismo espacio que hay a la derecha de cada botón pero también además abajo (en realidad sería el mismo espacio abajo, arriba, izquierda y derecha).

He intentado hacer un class y definirlo que era boton, y hacer un

Código (php) [Seleccionar] Expandir


.boton {


margin-bottom: 2px;

}



Pero no va, y si pongo btn-block, en class, me pone todos los botones en una columna, y tampoco centrados

La segunda pregunta sería: Si en la web también quisiera que se vieran 3 arriba y tres abajo, cómo lo haría ¿con una tabla?

A ver si me podéis ayudar, muchas gracias por adelantado.

[#!drvy]

A estas alturas ya deberías saber lo malo que es insertar CSS directamente en el html (attr style). Y los beneficios de tener un codigo ordenado, limpio y fácil de leer.

Dicho esto, la columna que pones ahí no tiene ningún sentido. Pones una columna de 12 que es lo mismo que no poner nada. Y la colocación de los enlaces de por sí ya se cambia sola aunque no hagas nada... Es decir, quitar el row y el col ahora mismo no te afectaria nada y los "botones" seguirán funcionando igual.

Código (css) [Seleccionar] Expandir

.boton {
   width:100px;
   height:100px;
   cursor:pointer;
   background-color:#e7e7e7;
   color: #000080;

   margin-bottom: 10px !important;
}

.boton > strong { display: block; }

Código (html5) [Seleccionar] Expandir

<div class="container">

   <div class='text-center'>
       <a href="dos.php" target="_parent" class="btn btn-default boton">
           <strong>Búsqueda</strong>
           <strong>Oficina</strong>
           <strong>Registro</strong>
           <strong>Visitas</strong>
       </a>

       <a href="ultimavisita.php" target="_parent" class="btn btn-default boton">
           <strong>Última Visita</strong>
       </a>

       <a href="regis.php" target="_parent" class="btn btn-default boton">
           <strong>Histórico</strong>
           <strong>Visitas</strong>
       </a>
   </div>


   <div class='text-center'>
       <a href="exp.php" target="_parent" class="btn btn-default boton">
           <strong>Ficha</strong>
       </a>

       <a href="fic.php" target="_parent" class="btn btn-default boton">
           <strong>Insertar</strong>
       </a>

       <a href="fils.php" target="_parent" class="btn btn-default boton">
           <strong>Cartera</strong>
       </a>
   </div>

</div>

Te recomendaria repasar el manual de bootstrap para recuerdes para que y como se usan las columnas.

Saludos

[bgnumis]

Hola sí,

El código de CSS estaba en un archivo CSS (aunque en el código Geshi escogí el php por error, inercia).

Estoy de acuerdo con todo lo que dices, lo de col y row no son necesarios, es verdad, no los quité no sé por qué. Dicho esto mil gracias por tu ayuda.

Sé que no es creíble, pero estos días (últimos y recientes días) me he transformado, "mejorado o avanzado" y me ha dado por el orden y atención y ponderación de la importancia de no sólo hacer las cosas, sino de hacerlas bien y ordenadas. Disculpas adelantadas por este y otros mensajes que os deben hastiar pero aún así nos ayudáis.

Mil gracias, mi compromiso, mejorar, un abrazo y mil gracias de nuevo.