英文:
Flex item not aligning its content to the right
问题
我有以下的HTML代码，我想要将右侧flex项目的内容右对齐：
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex">
<div class="flex-grow-1">
Line 1
<br />Line 2
</div>
<div class="ml-auto">
<strong>Line 3</strong><br/>
Longer line 4
</div>
</div>
然而，内容没有被右对齐。也就是说，文本 Line 3 和 Longer line 4 应该是右对齐的。
我漏掉了什么？
英文:
I have the following HTML where I would like to right align the contents of the right flex item:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex">
<div class="flex-grow-1">
Line 1
<br />Line 2
</div>
<div class="ml-auto">
<strong>Line 3</strong><br/>
Longer line 4
</div>
</div>
<!-- end snippet -->
However, the contents are not being right-aligned. ie. The text Line 3 and Longer line 4 should be right-aligned.
What am I missing?
答案1
得分: 0
class="text-right"
Line 3
Longer line 4
Longer line 4
英文:
use class="text-right"
<div class="text-right">
<strong>Line 3</strong><br/>
Longer line 4
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论