Mover el botón hacia el lado derecho de un div -- html campo con css campo con wordpress campo con bootstrap-4 camp Relacionados El problema

Move button to the right side of a div


-3
vote

problema

Español

Estoy usando Bootstrap 4 y no puedo mover el botón del lado izquierdo hacia el lado derecho. Lo intenté MR-AUTO y Float-Derecha Pero nada funciona.

Mi código:

  $.get7  

Mi violín: https://jsfiddle.net/apcz8jtw/

Original en ingles

I am using Bootstrap 4 and I cant move button from left side to the right side. I tried mr-auto and float-right but nothing works.

My code:

<!-- Page Content -->     <div class="container">        <!-- Page Heading -->       <h1 class="my-4">Page Heading         <small>Secondary Text</small>       </h1>        <!-- Project One -->       <div class="row shadow m-b-2">         <div class="col-md-4">           <a href="#">             <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">           </a>         </div>         <div class="col-md-8 p-3">           <h5>Project One</h5>           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>         </div>                 <div class="mr-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>       </div>       <!-- /.row -->        <hr>     </div>     <!-- /.container --> 

My Fiddle: https://jsfiddle.net/apcz8jtw/

           

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Si lees los documentos, verá que las solo las columnas deben estar directamente contenidas en la fila ...

  <div class="row shadow m-b-2">     <div class="col-md-4">         <a href="#">             <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">         </a>     </div>     <div class="col-md-8 p-3">         <h5>Project One</h5>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>     <div class="col-md-12">         <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a></div>     </div> </div>   
 

If you read the docs, you'll see that only columns should be directly contained in the row..

<div class="row shadow m-b-2">     <div class="col-md-4">         <a href="#">             <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">         </a>     </div>     <div class="col-md-8 p-3">         <h5>Project One</h5>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>     <div class="col-md-12">         <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a></div>     </div> </div> 
 
 
 
 
0
 
vote

Intenta esto:

   <div class="row shadow m-b-2">     <div class="col-md-4">       <a href="#">         <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">       </a>     </div>     <div class="col-md-8 p-3">       <h5>Project One</h5>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>       <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a>     </div>   </div>   
 

Try this:

 <div class="row shadow m-b-2">     <div class="col-md-4">       <a href="#">         <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">       </a>     </div>     <div class="col-md-8 p-3">       <h5>Project One</h5>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>       <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a>     </div>   </div> 
 
 
0
 
vote

Solución:

  <div class="col-md-12">   <a class="btn btn-primary btn-sm pull-right" href="#">View Project</a> </div>   

Intente agregar la clase de abajo en su código

ingrese la descripción de la imagen aquí

 

Solution:

<div class="col-md-12">   <a class="btn btn-primary btn-sm pull-right" href="#">View Project</a> </div> 

Try add the below class in your code

enter image description here

 
 
0
 
vote

¿Puede intentar reemplazar la clase MR-AUTO con ML-AUTO? Espero que resuelva su problema.

  <!-- Page Content --> <div class="container">    <!-- Page Heading -->   <h1 class="my-4">Page Heading     <small>Secondary Text</small>   </h1>    <!-- Project One -->   <div class="row shadow m-b-2">     <div class="col-md-4">       <a href="#">         <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">       </a>     </div>     <div class="col-md-8 p-3">       <h5>Project One</h5>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>             <div class="ml-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>   </div>   <!-- /.row -->    <hr> </div> <!-- /.container -->   
 

Can you try to replace mr-auto class with ml-auto. hope it will resolve your issue.

<!-- Page Content --> <div class="container">    <!-- Page Heading -->   <h1 class="my-4">Page Heading     <small>Secondary Text</small>   </h1>    <!-- Project One -->   <div class="row shadow m-b-2">     <div class="col-md-4">       <a href="#">         <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">       </a>     </div>     <div class="col-md-8 p-3">       <h5>Project One</h5>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>     </div>             <div class="ml-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>   </div>   <!-- /.row -->    <hr> </div> <!-- /.container --> 
 
 

Relacionados problema

0  OPCIÓN ACTIVA DE BOOTSTRAP DATEPKETER  ( Bootstrap datepicker active option ) 
Estoy usando Bootstrap DatePicker y quiero cambiar la opción activa para ser la costumbre. Ahora, mi opción activa es la primera, llamada "Hoy" y quiero ser l...

-2  Eliminación de fronteras alrededor de la página web  ( Removing borders around webpage ) 
En esta plantilla por Colorlib: https://colorlib.com/demo?theme=pemodule Estoy tratando de eliminar las fronteras púrpuras alrededor del exterior del sitio w...

1  ¿Cómo hacer el botón en Bootstrap 4 tarjeta de la tarjeta?  ( How to make button on bootstrap 4 card border ) 
¿Hay alguna forma de usar CSS para hacer un botón para una tarjeta de bootstrap que estará en la frontera con la tarjeta? Como en la imagen de abajo: Est...

0  Bootstrap: la altura de la imagen no cambia si "Col img-fluid" combinada en una clase junto con la imagen  ( Bootstrap image height does not change if col img fluid combined in a class a ) 
La altura de la imagen no cambia: <!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta ...

0  Trabajar alrededor para cuando Jquery Ui no tiene en cuenta los márgenes cuando se anima  ( Work around for when jquery ui doesnt account for margins when animating ) 
-hello, mundo! - El título da un rumbo bastante decente de lo que estoy luchando. No puedo encontrar ninguna pregunta que tenga este problema exacto, y no e...

-1  La imagen no está cargada correctamente en el control deslizante de la imagen de página completa en HTML  ( Image is not load properly in full page image slider in html ) 
Quiero cargar un control deslizante en mi sitio web. Pero en image los controles deslizantes no se cargan correctamente. Puede ser que es un problema relaci...

1  Bootstrap 4 - Diseño de mampostería combinado con el sistema de cuadrícula (dos, tres, cuatro y seis diseños de columna) [duplicado]  ( Bootstrap 4 masonry layout combined with the grid system two three four and ) 
Esta pregunta ya tiene respuestas aquí : Bootstrap 4 Diseño de mampostería Utilizando la cuadrícula ...

0  ¿Cómo funcionan las tarjetas de bootstrap 4?  ( How do bootstrap 4 board cards ) 
Estoy usando bootstrap 4 beta. Necesito crear una tarjeta de tablero o en el tablero en Trello o Github. Aprecio las ideas que me pueden ayudar. Lo pensé en...

0  Centro Alinee el contenido en pantallas pequeñas  ( Center align content in small screens ) 
Soy nuevo en Bootstrap 4. Tratando de crear un sistema de cuadrícula que haya dejado alineado contenido en pantallas más anchas y contenido centrado en pantal...

0  Angular 5 Obtener solicitud no respondida  ( Angular 5 get request nonresponsive ) 
He visto muchos problemas similares con respecto a este problema en este sitio, pero tienden a ser demasiado específicos (con Django, Python, Spring, etc.) o ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos