如何使用 bootstrap 将大视口的文本字段左对齐并切换到小视口的居中？

Question

我有 some code（见下文），当运行在小视口中时，应该使 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>

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

我可能在这里遗漏了一些基本的东西，但本网站上其他 Q/A 的建议建议 text-center 应该从最小的视口应用，向上添加 text-md-left 应该只适用于更大的视口。即使我只是尝试使用文本中心，它似乎也不想将 h1 居中。我在这里错过了什么？

Answer 1

您的 .row-s 有 display: flex; 属性，这意味着 Flexbox Layout Mode 已被激活。因此，内部元素 - <h1> 和 <p> - 已成为弹性容器中的弹性项目。要根据需要在容器内对齐弹性项目，您可以在 .row 元素上使用 justify-content: center; 属性作为样式中的小视口，而不是 text-align: center;.

Answer 2

您还可以专门为每个视口创建单独的 div，并使用此处的 class 名称显示或隐藏它们：

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

您可以使用这种方法更轻松地控制您的内容。

如何使用 bootstrap 将大视口的文本字段左对齐并切换到小视口的居中？

How do I left-align a text field for large viewports and switch to centered for smaller viewports using bootstrap?

html

css

bootstrap-4

text-alignment