使用引导程序4的div类中的右对齐元素4

我使用引导程序4和Angular Material的角度2。但是，我有麻烦对齐我的容器div内的元素。我想我的两个按钮和文本对齐到右侧使用引导程序4的div类中的右对齐元素4

这里是什么，我试图产生的结果显示在照片

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

这些解决方案都该解决方案不动元素的权利。我究竟做错了什么？

来源

2017-02-05 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>

来源

2017-02-05 14:30:39

Hey Sumesh。奇迹般有效。这一直困扰我很久。你建议如何解决这个问题？你是如何知道自从Harekrishna在在线编辑器中提到以前的代码工作但不是我的程序后发现了什么问题的（而且我已经证实确实如此） – user172902

其实我不知道为什么你的代码无法工作。但具有display：inline-block属性的项目跟随父元素的文本对齐，并且可以相对于父元素text-align属性进行对齐。 –

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

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

来源

2017-02-05 10:53:39

在自举4，pull-right已被替换float-right。

如果float-right不能正常工作，记得引导4现在Flexbox的，许多元素都是display:flex可以防止float-right的工作。在某些情况下，像align-self-end或ml-auto这样的实用程序类可以将Flexbox容器内的元素（如Bootstrap 4 .row，Card或Nav）右对齐。在flexbox元素中使用ml-auto（margin-left：auto）将元素向右推。

此外，请记住text-right仍然适用于内联元素。

Bootstrap 4 align right examples

来源

2018-02-26 21:47:27 ZimSystem

使用引导程序4的div类中的右对齐元素4

回答

相关问题