div类中的右对齐元素

Posted 2023-03-05

【中文标题】div类中的右对齐元素

【英文标题】：Right align element in div class

【发布时间】：2017-06-22 09:03:48

【问题描述】：

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

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

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

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

【参考方案1】：

我已经从button 和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>

【讨论】：

嘿苏梅什。奇迹般有效。这个问题困扰我很久了。你有什么建议来解决这个问题？自从 Harekrishna 提到之前的代码在在线编辑器中有效但在我的程序中无效（我已经确认确实是这样）

其实我不知道你的代码为什么不起作用。但是具有 display:inline-block 属性的项目是跟随父元素的 text-align 并且可以相对于父元素的 text-align 属性对齐。

【参考方案2】：

引导程序 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 这样的实用程序类可以右对齐 Flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。 ml-auto (margin-left:auto) 在 flexbox 元素中用于将元素推到右侧。

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

Bootstrap 4 align right examples

【参考方案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>

【参考方案4】：

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

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;

【讨论】：

bootstrap 的重点是避免像这样评论 CSS。我建议参考他们的文档以了解他们的工具的更不恰当的用法。