在div类

Question

我正在使用带有Bootstrap 4和Angular Material的角度2。但是，我无法正确对齐容器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;
}

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

Answer 1

我已从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>

Answer 2

在Bootstrap 4中，pull-right已替换为float-right。

如果float-right无效，请记住 Bootstrap 4现在是flexbox ，而且许多元素都是display:flex，可以阻止{{1}从工作。在某些情况下，像float-right或align-self-end这样的实用程序类可以正确对齐Flexbox容器内部的元素，如Bootstrap 4 .row，Card或Nav。 ml-auto（margin-left：auto）在flexbox元素中用于向右推送元素。

另外，请记住ml-auto仍可用于内联元素。

Bootstrap 4 align right examples

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>

Answer 4

你没有做错任何事。只需将代码复制并粘贴到任何在线引导程序编辑器中，您将获得正确的结果。但你可以用更有条理的方式写它

HTML code：

        <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;
}