web-dev-qa-db-fra.com

Élément d'alignement à droite dans la classe div

J'utilise angular 2 with Bootstrap 4 and Angular Material . Cependant, j'ai du mal à aligner correctement les éléments à l'intérieur de mon conteneur) div. Je veux que mon bouton et mon texte soient alignés sur le côté droit

Voici ce que le code que j'ai essayé de produire le résultat comme le montre la photo

<div class="container">
  <div class="pull-right">
    <p class="d-inline pull-right">Some text</p>
    <button type="button" class="btn btn-primary pull-right">+</button>
  </div>
</div>

Right align failed

J'ai également essayé cette solution depuis StackOverflow

<div class="container">
  <div class="asdf">
    <p class="d-inline pull-right">Some text</p>
    <button type="button" class="btn btn-primary pull-right">+</button>
  </div>
</div>

.asdf {
  margin-left:auto; 
  margin-right:0;
}

Ces deux solutions ne déplacent pas les éléments vers la droite. Qu'est-ce que je fais mal?

htmlcsstwitter-bootstrapangular-materialbootstrap-4
11
user172902

J'ai supprimé la classe pull-right classe à partir des balises button et p et ajouté text-right classe au div.container.

Je pense que c'est ce dont vous avez besoin.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<div class="container text-right">
    <p class="d-inline">Some text</p>
    <button type="button" class="btn btn-primary d-inline">+</button>
</div>
17
Sumesh S

Dans Bootstrap 4, pull-right a été remplacé par float-right.

Si float-right ne fonctionne pas, rappelez-vous que Bootstrap 4 est désormais flexbox , et de nombreux éléments sont display:flex ce qui peut empêcher float-right de travailler. Dans certains cas, les classes utilitaires comme align-self-end ou ml-auto fonctionne pour aligner à droite les éléments qui sont à l'intérieur d'un conteneur flexbox comme un Bootstrap 4 .row, Card ou Nav. Le ml-auto (margin-left: auto) est utilisé dans un élément flexbox pour pousser les éléments vers la droite).

N'oubliez pas non plus que text-right fonctionne toujours sur les éléments en ligne.

Bootstrap 4 aligner les bons exemples

16
Zim