Html 如何使用引导将大视口的文本字段左对齐，并将小视口的文本字段切换为居中？

我有（见下文）在小视口中运行时，应该将

img

和

h1

居中放置在图像下方。由于某些原因，只有图像居中，而不是

h1

          <div class="container">
              <div class="row">
                  <div class="col-md-auto text-md-left text-center">
                        <img src="http://www.joncage.co.uk/img/JonCage.jpg" width="200px" height="200px" alt="Jon Cage" class="rounded-circle">
                  </div>
                  <div class="col">
                      <div class="row text-md-left text-center">
                          <h1>Jon Cage</h1>
                      </div>
                      <div class="row text-justify">
                          <p>Jon is not very good at Bootstrap 4.</p>
                      </div>
                  </div>
              </div>
          </div>

乔恩·凯奇
乔恩不太擅长引导4

我已经在文档上爬了很多次，但我很难理解为什么这在一种情况下有效，而在另一种情况下无效

---

我可能在这里遗漏了一些基本的东西，但本网站其他Q/A中的建议建议是，

text center

应该从最小的视口开始应用，向上添加

text md left

应该只适用于较大的视口。即使我只是尝试使用文本中心，它似乎也不想将

h1

居中。我在这里错过了什么？

您的

。行

-s具有

显示：flex属性，表示已激活。因此，内部元素——
和
——已成为flex容器中的flex项。要根据需要对齐容器中的flex项目，可以使用
justify content:center.row
元素上的code>属性，而不是
文本对齐：居中
您还可以专门为每个视口创建单独的div，并使用此处的类名显示或隐藏它们：


通过这种方法，您可以更轻松地控制您的内容。
好的，这很好；更改包含
h1
的
行
，使其类为
row justify content center justify content md start
，确实可以解决此问题。还有一个问题；为什么对图像应用相同的设置会使图像无法正确居中？图像不是弹性项。在标记中，它是这样的：.row->.col md auto text md left text center->img。因此，这里带有.col md auto text md left text center的元素是一个flex项。而在上述情况下，标记类似于.row->h1和.row->p，因此，h1和p是弹性项。Flex布局仅涉及容器及其直接子级。容器外和儿童体内的一切都保持原样。是的，这是一个相当重要的话题。我相信你会很快明白的。你的建议是flex布局只穿透一层，这是关键（我读过的任何文档都没有明确说明这一点）。我为第一行添加了一个容器和一个div。通过一点点的摆弄，我让它工作起来了，结果是——谢谢你的帮助：）很高兴听到这个消息！不客气！：）事实上，我记得读过这些信息，FlexLayout只在MDN的某个地方深入了一层……另一方面，那里有很多文章，它们经常被编辑。所以，也许你没有找到正确的文章：）重复多次内容似乎是相当浪费的，但我想对于这样一个小页面来说，这不会是世界末日。