我目前有一个响应式页面，在桌面模式下包含 2 列，其中文本居中且对齐。到目前为止，一切都很好。但是，当我降低分辨率并切换到移动模式时，我希望获得一个文本保持居中和对齐的单列，但事实并非如此。
这是我在移动模式下得到的结果：
+------------------------+
| text |
| short text |
| long text |
| another text |
| another short text |
| another long text |
+------------------------+
预期的行为是两列之间的文本对齐，如下所示：
+---------------------------+
| text |
| short text |
| long text |
| another text |
| another short text |
| another long text |
+---------------------------+
这里有一个代码片段可以帮助您更好地理解。
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex justify-content-center">
<div>
text<br/>
short text<br/>
long text<br/>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
another text<br/>
another short text<br/>
another long text<br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>也许我的处理方式是错误的，但我已经看过了，但没有找到解决方案。但我仍然充满希望，希望你能帮助我。预先感谢大家的帮助。
如果我使用 bootstrap css 3.3.7 复制>粘贴您的代码，对齐似乎可以工作？我假设您希望文本左对齐。
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex justify-content-center">
<div>
text<br/>
short text<br/>
long text<br/>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
another text<br/>
another short text<br/>
another long text<br/>
</div>
</div>
</div>
</div>
</body>