elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: 4n4lDetector v1.3: herramienta de análisis estático de malware


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Botones espacio de abajo bootstrap
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Botones espacio de abajo bootstrap  (Leído 326 veces)
bgnumis

Desconectado Desconectado

Mensajes: 128


Ver Perfil
[Resuelto] Botones espacio de abajo bootstrap
« en: 19 Agosto 2017, 00:10 »

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

Código
  1.  
  2. <div class="container" margin: auto; >
  3.     <div class="row">  
  4.         <div  class="col-lg-12 text-center">
  5.  
  6.  
  7. <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>
  8.  
  9. <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>
  10.  
  11.    <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>
  12.  
  13.     <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>
  14.  
  15.       <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>
  16.  
  17.      <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>
  18.  
  19.  
  20. </div>
  21. </div>
  22. </div>
  23.  
  24.  
  25.  


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
  1. .boton {
  2.  
  3.  
  4. margin-bottom: 2px;
  5.  
  6. }
  7.  
  8.  

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.



« Última modificación: 26 Agosto 2017, 14:22 por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 4.626



Ver Perfil WWW
Re: Botones espacio de abajo bootstrap
« Respuesta #1 en: 19 Agosto 2017, 16:57 »

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
  1. .boton {
  2.    width:100px;
  3.    height:100px;
  4.    cursor:pointer;
  5.    background-color:#e7e7e7;
  6.    color: #000080;
  7.  
  8.    margin-bottom: 10px !important;
  9. }
  10.  
  11. .boton > strong { display: block; }



Código
  1. <div class="container">
  2.  
  3.    <div class='text-center'>
  4.        <a href="dos.php" target="_parent" class="btn btn-default boton">
  5.            <strong>Búsqueda</strong>
  6.            <strong>Oficina</strong>
  7.            <strong>Registro</strong>
  8.            <strong>Visitas</strong>
  9.        </a>
  10.  
  11.        <a href="ultimavisita.php" target="_parent" class="btn btn-default boton">
  12.            <strong>Última Visita</strong>
  13.        </a>
  14.  
  15.        <a href="regis.php" target="_parent" class="btn btn-default boton">
  16.            <strong>Histórico</strong>
  17.            <strong>Visitas</strong>
  18.        </a>
  19.    </div>
  20.  
  21.  
  22.    <div class='text-center'>
  23.        <a href="exp.php" target="_parent" class="btn btn-default boton">
  24.            <strong>Ficha</strong>
  25.        </a>
  26.  
  27.        <a href="fic.php" target="_parent" class="btn btn-default boton">
  28.            <strong>Insertar</strong>
  29.        </a>
  30.  
  31.        <a href="fils.php" target="_parent" class="btn btn-default boton">
  32.            <strong>Cartera</strong>
  33.        </a>
  34.    </div>
  35.  
  36. </div>

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

Saludos


« Última modificación: 19 Agosto 2017, 17:03 por #!drvy » En línea

bgnumis

Desconectado Desconectado

Mensajes: 128


Ver Perfil
Re: Botones espacio de abajo bootstrap
« Respuesta #2 en: 19 Agosto 2017, 23:42 »

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.

En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
espacio hacia abajo en pascal? =(
Programación General
HK 9 5,375 Último mensaje 20 Abril 2009, 20:57
por Riki_89D
[Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
Desarrollo Web
DarK_FirefoX 0 982 Último mensaje 6 Abril 2015, 17:28
por DarK_FirefoX
[Resuelto] dropdown bootstrap jquery
Desarrollo Web
basickdagger 0 369 Último mensaje 10 Febrero 2016, 17:37
por basickdagger
[Resuelto] Duda con Modal en bootstrap
Desarrollo Web
magodiesan 2 623 Último mensaje 1 Enero 2017, 19:19
por magodiesan
[Resuelto] Boton bootstrap
Desarrollo Web
huerto123 2 249 Último mensaje 7 Enero 2017, 01:06
por huerto123
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines