1

Tengo el siguiente div, que lo que trato de realizar es colocar en 2 filas mostrar 3 botones, distribuidos de la siguiente manera en la primera fila 2 botones y en la 3era uno solo, el problema o duda con la que vengo es en la primera fila al poner col-lg-6 automáticamente como que me da un salto de linea y se va debajo.

<div class="justify-content-center">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
                Detalle.
            </a>
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Presupuesto" asp-page="/Account/Reg_Presup">
                Presup.
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <a class="btn btn-success col-sm-12 col-md-12" style="margin-top: 5px" ; asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
                Historia Clinica.
            </a>
        </div>
    </div>
</div>

Así me queda al depurar:

introducir la descripción de la imagen aquí

¿Que estaría realizando de manera incorrecta?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="justify-content-center">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Detalle.
            </a>
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Presupuesto" asp-page="/Account/Reg_Presup">
            Presup.
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <a class="btn btn-success col-sm-12 col-md-12" style="margin-top: 5px" ; asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Historia Clinica.
            </a>
        </div>
    </div>
</div>

Anexo un imagen de como quisiera que quede, en la primera es la versión de escritorio y en la segunda es la versión móvil, el problema solo es en la versión de escritorio.

introducir la descripción de la imagen aquí

3
  • el col-lg-6 es para pantallas grandes, en la primera imagen se hace el salto de linea porque estas colocando que en pantallas pequeñas tome toda la fila col-sm-12
    – Dev 200
    Commented el 10 oct. 2021 a las 18:27
  • ¿Porqué anidas columna dentro de columna? La documentación de Bootstrap sobre el sistema de grilla es muy específica al indicar que las columnas deben ser siempre hijos inmediatos de elementos fila. Anidar una columna dentro de otra produce comportamientos no esperados, si deseas dividir en columnas una columna de ámbito superior, debes usar un elemento de fila dentro de esa columna de ámbito superior, para hacer la grilla correctamente. Saludos Commented el 10 oct. 2021 a las 18:29
  • ¿Podrias dibujar en paint el diseño esperado para poder ayudarte mejor?, tanto en desktop como en mobile
    – Dev 200
    Commented el 10 oct. 2021 a las 18:32

1 respuesta 1

2

El problema es que tienes anidados y Bootstrap se lía al calcular los anchos con lo que los botones no caben. Cosas del framework.

Una solución:

<div class="justify-content-center">
    <div class="row">
 
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Detalle.
            </a>
            <a class="col-sm-12 col-md-6 col-lg-6 btn btn-success" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Presupuesto" asp-page="/Account/Reg_Presup">
            Presup.
            </a>
        </div>

    <div class="row">
        <div class="col-sm-12 col-md-12">
            <a class="btn btn-success col-sm-12 col-md-12" style="margin-top: 5px" ; asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Historia Clinica.
            </a>
        </div>
    </div>
</div>

Claro que los botones quedan pegados, puedes solucionarlo con bordes.
Otra opción (me gusta más):

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="justify-content-center">
<div class="row row-cols-1 row-cols-md-2">
            <a class="col btn btn-success m-2" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Detalle.
            </a>
            <a class="col btn btn-success m-2" style="margin-top: 5px" asp-route-id="@item.PAC_ID" asp-area="Presupuesto" asp-page="/Account/Reg_Presup">
            Presup.
            </a>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <a class="btn btn-success col-sm-12 col-md-12" style="margin-top: 5px" ; asp-route-id="@item.PAC_ID" asp-area="Paciente" asp-page="/Account/Detalle">
            Historia Clinica.
            </a>
        </div>
    </div>
</div>

Puedes poner márgenes a los botones para que queden más separados.
Hay más opciones como usar columnas con los botones dentro, lo que te permite controlar mejor las dimensiones.

1
  • Gracias me ayudo, un abrazo campeon!
    – Carrobe90
    Commented el 11 oct. 2021 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.