web-dev-qa-db-ja.com

divクラスの要素を右揃え

私はangular 2 with Bootstrap 4 and Angular Material を使用しています。しかし、コンテナ内の要素を右に揃えるのに問題がありますdiv。ボタンとテキストの両方を右側に揃えたい

写真に示すように、私が結果を生成しようとしたコードは次のとおりです

<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

また、このソリューションを 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;
}

これらのソリューションはどちらも、要素を右に移動しません。何が間違っていますか？

htmlcsstwitter-bootstrapangular-materialbootstrap-4
11
user172902

クラスpull-rightクラスをbuttonタグとpタグの両方から削除し、text-rightクラスをdiv.containerに追加しました。

これがあなたが必要とするものだと思う

<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

Bootstrap 4、pull-rightはfloat-rightに置き換えられました。

float-rightが機能しない場合、Bootstrap 4がflexbox、および多くの要素はdisplay:flexであり、float-rightの動作を妨げる可能性があります。場合によっては、align-self-endやml-autoなどのユーティリティクラスは、flexboxのようなコンテナをBootstrap = 4 .row、CardまたはNav。ml-auto（margin-left：auto）は、flexbox要素で右に要素をプッシュするために使用されます。

また、text-rightは引き続きインライン要素で機能することを忘れないでください。

ブートストラップ4は右の例を揃える

16
Zim