右对齐div类中的元素

I am using angular 2 with Bootstrap 4 and Angular Material. However, I am having trouble right align the elements inside my container div. I want both my button and text to be aligned to the right hand side

我用的是角2和靴带4和角材料。但是，我无法正确对齐容器div中的元素。我希望按钮和文本都对齐到右边

Here is what the code that I have tried to produce the result as shown in the 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>

I have also tried this solution from *

我也从*尝试过这个解决方案

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

Both of these solutions does not move the elements to the right. What am I doing wrong?

这两个解都没有将元素往右移动。我做错了什么?

3 个解决方案

#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.

我已经从按钮和p标记中删除了类拖放类，并向div.container添加了文本-right类。

I think this is what you need.

我想这就是你需要的。

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

#2

In Bootstrap 4, pull-right has been replaced with float-right.

在Bootstrap 4中，右拉被右拉所取代。

If float-right is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working. In some cases, the utility classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav. The ml-auto (margin-left:auto) is used in a flexbox element to push elements to the right.

如果float-right不起作用，请记住，Bootstrap 4现在是flexbox，并且显示了许多元素:flex，它可以阻止float-right工作。在某些情况下，类似于align-self-end或ml-auto这样的实用程序类可以将flexbox容器中的元素对齐，比如引导4 .row、Card或Nav。在flexbox元素中，使用ml-auto(左:auto)将元素向右推送。

Also, remember that text-right still works on inline elements.

还要记住，text-right仍然适用于内联元素。

Bootstrap 4 align right examples

引导4对齐正确的示例

#3

You are not doing anything wrong. Just copy and paste your code in any online bootstrap editor, you will get the right result. But you can write it in a more structured way

你没有做错什么。只要在任何在线引导编辑器中复制并粘贴您的代码，您将得到正确的结果。但是你可以用更结构化的方式来写

HTML code:

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 code

CSS代码

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

#1