h1标签引导程序5中具有不同对齐方式的不同跨度标签

Question

我需要在h1标签中嵌套3个span标签(或类似标签(，将第一个在左边，第二个在中间，第三个在右边对齐。

我可以通过Bootstrap完成吗？或者它需要合适的CSS吗？

Answer 1

您可以尝试类似的

<h1 class="d-flex justify-content-between">
<span>Left</span>
<span>Center</span>
<span>Right</span>
</h1>

Answer 2

您可以使用Bootstrap的justify content实用程序：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<h1 class="d-flex justify-content-between">
<span>1</span>
<span>2</span>
<span>3</span>
</h1>
<h1 class="d-flex justify-content-around">
<span>1</span>
<span>2</span>
<span>3</span>
</h1>
<h1 class="d-flex justify-content-evenly">
<span>1</span>
<span>2</span>
<span>3</span>
</h1>

Answer 3

我不知道Bootstrap，但使用CSS，这非常简单：

h1 { display: flex; justify-content: space-between; }

<h1><span>First</span><span>Second</span><span>Third</span></h1>