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>

我已多次浏览文档，但我很难理解为什么这种情况适用于一种情况而不是另一种情况。

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

Answer 1

您的.row - s拥有display: flex;属性，这意味着Flexbox Layout Mode已被激活。因此，内部元素 - <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

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

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

2 个答案: