2

Tengo una serie de 4 buttons en mi vista de ASP.NET MVC. Me quedan los 4 en sentido vertical, que formas hay para poder dejarlos los 4 horizontalmente?.

He probado jugando con las class col-xs-6 en todos pero no me ha funcionado.

Dejo mi código:

           <div class="row">
                <div class="col-xs-6">
                    <button type="button" class="btn btn-primary" onclick="EnviarCheck()" id="enviarChk">Confirmar lectura</button>
                    <p id="pMensaje"></p>
                </div>
                <div id="div_imprimir" class="col-xs-6">
                    <button type="button" class="btn btn-primary" onclick="Imprimir('div_oculto_imprimir')" id="ImprimirImg">Imprimir</button>
                </div>
                <div class="col-xs-6">
                    <a href="@Url.Action("ReporteToExcel", "Mi" )" target="_blank" class="btn btn-primary botonExcel" id="btn_pdf"><i class="fas fa-file-excel"></i> Exportar Excel</a>
                </div>
                <div class="col-xs-6">
                    <a href="@Url.Action("ExportarPDF", "Mi" )"  class="btn btn-primary botonPDF" id="btn_pdf_comparador_ci"><i class="fas fa-file-pdf"></i>Exportar PDF</a>
                </div>
            </div>

introducir la descripción de la imagen aquí

Esta fue la ultima modificación que hice y me quedo asi.

3 respuestas 3

5

Ten en cuenta que la alineación horizontal en Bootstrap consta de un espacio total de 12 columnas, esto quiere decir que te estás excediendo en el doble de la longitud de la pantalla.

Por otra parte, estás reduciendo al tamaño mínimo las longitudes (-xs- formato para dispositivos móviles). Te aconsejo que lo hagas en un tamaño medio (-md- tablets y monitores pequeños)`. Eso si, cuando visualices en dispositivos móviles (responsive), los botones te aparecerán apilados en disposición vertical (como debería ser).

El código para que se visualice de manera correcta es el siguiente:

        <div class="row">
            <div class="col-md-3">
                <button type="button" class="btn btn-primary" onclick="EnviarCheck()" id="enviarChk">Confirmar lectura</button>
                <p id="pMensaje"></p>
            </div>
            <div id="div_imprimir" class="col-md-3">
                <button type="button" class="btn btn-primary" onclick="Imprimir('div_oculto_imprimir')" id="ImprimirImg">Imprimir</button>
            </div>
            <div class="col-md-3">
                <a href="@Url.Action("ReporteToExcel", "Mi" )" target="_blank" class="btn btn-primary botonExcel" id="btn_pdf"><i class="fas fa-file-excel"></i> Exportar Excel</a>
            </div>
            <div class="col-md-3">
                <a href="@Url.Action("ExportarPDF", "Mi" )"  class="btn btn-primary botonPDF" id="btn_pdf_comparador_ci"><i class="fas fa-file-pdf"></i>Exportar PDF</a>
            </div>
        </div>
3

Hola amigo el problema es que usas xs-6 y eso hace que se parta en dos, el tamaño tenlo en cuenta siempre sera máximo de 12 es decir como pones de a 6 entonces solo puedes tener como máximo dos botones, si quisieras que estén los 4 ahí

entonces divide 12/4=3 entonces cada uno debe de ser de 3.

Otro punto xs,md etc son para los tamaños.

Aquí te muestro como quedaría saludos.

<div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="EnviarCheck()" id="enviarChk">Confirmar lectura</button>
                    <p id="pMensaje"></p>
                </div>
                <div id="div_imprimir" class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="Imprimir('div_oculto_imprimir')" id="ImprimirImg">Imprimir</button>
                </div>
                <div class="col-md-3">
                    <a href="@Url.Action("ReporteToExcel", "Mi" )" target="_blank" class="btn btn-primary botonExcel" id="btn_pdf"><i class="fas fa-file-excel"></i> Exportar Excel</a>
                </div>
                <div class="col-md-3">
                    <a href="@Url.Action("ExportarPDF", "Mi" )"  class="btn btn-primary botonPDF" id="btn_pdf_comparador_ci"><i class="fas fa-file-pdf"></i>Exportar PDF</a>
                </div>
</div>

introducir la descripción de la imagen aquí

2
  • 1
    Muchas graciasss he podido resolver el problema
    – tato8vio
    Commented el 13 dic. 2019 a las 19:12
  • De nada....Saludos Commented el 13 dic. 2019 a las 19:13
1

Recuerda que el número de columnas en Bootstrap debe sumar 12.

Por otro lado, en Bootstrap 4, las columnas se pueden dejar automáticas (dejando solo col en la clase css.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
       <div class="row">
                    <div class="col">
                        <button type="button" class="btn btn-primary" onclick="EnviarCheck()" id="enviarChk">Confirmar lectura</button>
                        <p id="pMensaje"></p>
                    </div>
                    <div id="div_imprimir" class="col">
                        <button type="button" class="btn btn-primary" onclick="Imprimir('div_oculto_imprimir')" id="ImprimirImg">Imprimir</button>
                    </div>
                    <div class="col">
                        <a href="@Url.Action("ReporteToExcel", "Mi" )" target="_blank" class="btn btn-primary botonExcel" id="btn_pdf"><i class="fas fa-file-excel"></i> Exportar Excel</a>
                    </div>
                    <div class="col">
                        <a href="@Url.Action("ExportarPDF", "Mi" )"  class="btn btn-primary botonPDF" id="btn_pdf_comparador_ci"><i class="fas fa-file-pdf"></i>Exportar PDF</a>
                    </div>
                </div>

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.