div 类中的右对齐元素

Question

我将 angular 2 与 Bootstrap 4 和 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>

我也尝试过 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;
}

这两种解决方案都不会将元素向右移动。我究竟做错了什么？

原文由 user172902 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

I’ve removed the class pull-right class from both the button and the p tag and added text-right class to the 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>

原文由 Sumesh S 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 5（2021 年更新）

Because of new RTL support, *-left and *-right classes have changed to *-start and *-end .以下是 Bootstrap 4 到 Bootstrap 5 的转换：

• float-left => float-start
• float-right => float-end
• ml-auto => ms-auto
• mr-auto => me-auto

Bootstrap 4（原始答案）

在 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 仍然适用于内联元素。

Bootstrap 4 右对齐示例

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议