Question

当我这样做时，它会按预期正确对齐：

<div class="text-right">
    ...
    ...
    ...
</div>

我希望这会导致内容相对于自身左对齐，但在包含的 div 中右对齐：

<div class="text-right">
    <div class="text-left">
        ...
        ...
        ...
    </div>
</div>

虽然没有这样的运气，它只是左对齐所有东西。

Answer 1

您应该使用网格系统，而不是文本对齐方式。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
      <div class="col-4">Some text.</div>
      <div class="col-8 text-right">Some right-column text.</div>
  </div>
</div>

如果您真的想要文本对齐，您的文本可能应该放在可以单独对齐的段落中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <p>Some left-aligned (by default) text.</p>
      <p class="text-right">Some right-aligned text.</p>
      <p>Some left-aligned (by default) text.</p>
    </div>
  </div>
</div>

Answer 2

所以我尝试的解决方案确实有效。问题是我有一些带有 w-100 的元素导致它占据列的整个宽度，从而确保所有元素都与列左对齐，而不是最宽的元素右对齐而其他所有元素左对齐

如何在右对齐的 div 中左对齐内容？

2 个答案: