css - link - Bootstrap 4 alinea los elementos directamente dentro de un col div
ocultar div bootstrap responsive (3)
Hay un par de problemas con el marcado proporcionado que hace que el diseño parezca extraño. @ZimSystem mencionó el .container-fluid pero también que siempre debe tener un div.col dentro de un .row para que obtenga el mismo tipo de relleno en los bordes.
No necesita <p> alrededor de los botones. Para obtener la alineación, simplemente agregue .ml-auto al primer botón como este:
<div class="container-fluid">
<section class="row mb-2 mt-2">
<h1 class="col-md-8">Applications portfolio</h1>
<div class="btn-group col-md-4" role="group">
<a class="btn btn-secondary btn-md ml-auto" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</div>
</section>
<section class="row" style="background-color: grey; height: 50px; overflow:hidden;">
<div class="col">
<p>Just a simple reference block to see the 100% width</p>
</div>
</section>
</div>
Mi pregunta es bastante simple, pero no encuentro una manera adecuada (es decir, no utilizar la posición absoluta de los elementos secundarios dentro de un contenedor de posición relativa) para lograr esto en Bootstrap 4.
Tengo una fila con un col-8 y un col-4. Mi contenido en col-4 debe alinearse a la derecha para que su contenido esté en el borde derecho.
<h1 class="col-md-8">Applications portfolio</h1>
<div class="btn-group col-md-4" role="group">
<p class="float-right">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
Aquí hay un codepen:
https://codepen.io/anon/pen/QpzVgJ
Quiero que mis dos botones se alineen a la derecha dentro de col-4.
¿Cómo en Bootstrap 4 alinear correctamente los elementos correctos dentro de un col?
La clase btn-group en ese md-4 hace que DIV sea un contenedor flexible, por lo que una clase de text-right regular para la alineación no funcionará. En su lugar, agregue justify-content: flex-end; en un atributo de estilo:
<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">
https://codepen.io/anon/pen/RpEYEM
(nota: borré la etiqueta p dentro de ese DIV)
Use ml-auto para presionar los botones hacia la derecha ...
https://codepen.io/anon/pen/evbLQN
<div class="btn-group col-md-4" role="group">
<p class="ml-auto">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
Otra opción es eliminar el btn-group del col-md-4 (no estoy seguro de por qué lo estás usando), luego float-right funcionará como se espera.
<section class="row">
<h1 class="col-md-8">Applications portfolio</h1>
<div class="col-md-4" role="group">
<p class="float-right">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</p>
</div>
</section>
PD: para evitar que la barra de desplazamiento horizontal esté visible en su Codepen, asegúrese de que .row esté dentro de un container-fluid . Además, generalmente col-* se utilizan para contener contenido y no se deben aplicar a otros componentes / elementos. Entonces, por ejemplo, si quieres usar el btn-group ...
<div class="container-fluid">
<section class="row">
<div class="col-md-8">
<h1>Applications portfolio</h1>
</div>
<div class="col-md-4">
<div class="btn-group float-right mt-2" role="group">
<a class="btn btn-secondary btn-md" href="#">
<i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
<a class="btn btn-md btn-secondary" href="#">
<i class="fa fa-flag" aria-hidden="true"></i> Report</a>
</div>
</div>
</section>
</div>