在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

Answer 1

我已经从按钮和p标签中删除了pull-right类，并将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>

- Sumesh S

---

嘿，Sumesh。运行得非常好。这个问题已经困扰我很久了。你推荐用什么方法才能解决这个问题？Harekrishna提到先前的代码在在线编辑器中可以正常运行，但在我的程序中却不行（我已经确认这确实是这样）。你是怎样找出问题所在的呢？ - user172902

实际上，我不知道为什么你的代码没有生效。但是具有display:inline-block属性的元素会遵循父元素的text-align属性，并且可以与父元素的text-align属性对齐。 - Sumesh S

class="d-inline" 对我很有效，谢谢Sumesh - Allie Moosa

Answer 2

Bootstrap 5 (更新于2021年)

由于新的RTL支持，*-left和*-right类已更改为*-start和*-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这样的实用程序类可用于将位于Bootstrap 4 .row、Card或Nav等flexbox容器内的元素右对齐。在flexbox元素中使用ml-auto（margin-left:auto）将元素向右推。

此外，请记住text-right仍可在内联元素上使用。

Bootstrap 4对齐右侧示例

- Zim

Answer 3

使用对齐选项处理的一种简单方法

<div class="col-sm-12" align="right">
        <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle" aria-hidden="true"></i> Approve</button>

- Sunil Patil

Answer 4

你没有做错任何事情。只需将您的代码复制并粘贴到任何在线bootstrap编辑器中，您将获得正确的结果。但是您可以以更有结构的方式编写它

HTML代码：

        <div class="container">
          <div class="row">
            <div class="col-md-12 .asdf">
              <button type="button" class="btn btn-primary pull-right">+</button>
              <p class="pull-right">Some text</p>
            </div>
          </div>
        </div>

CSS 代码

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

- Harekrishna Murari

---

整个 Bootstrap 的意义在于避免像这样的注释 CSS。我建议参考他们的文档，以获取更熟练使用其工具的方法。 - jcaruso