如何使用引導程序左對齊大視口的文本字段並切換到小視口的居中位置？

Question

我有一些代碼 （見下文），當在小視口中運行時，應將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>

我已經遍歷了文檔多次，但仍在努力查看為什么這在一種情況下有效而在另一種情況下無效。

我可能在這里遺漏了一些基本信息，但是該站點上其他問/答的建議表明， text-center應該從最小的視口開始應用，並且添加text-md-left應該僅應用於較大的視口。 即使我只是嘗試使用文本中心，它似乎也不希望將h1居中。 我在這里錯過了什么？

Answer 1

您的.row -s display: flex; 屬性，表示Flexbox布局模式已激活。 因此，內部元素<h1>和<p> -已成為flex容器中的flex項目。 要根據需要在容器中對齊flex項目，可以使用justify-content: center; .row元素上的屬性，用於您樣式中的小視口，而不是text-align: center; 。

Answer 2

您還可以專門為每個視口創建單獨的div，並使用此處找到的類名稱顯示或隱藏它們：

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

您可以使用此方法更輕松地控制內容。