html - 在宽屏幕上显示标题及其下方的段落无法正常工作

Question

我有以下代码，它使用 bootstrap 4.0 来显示<h1>以下 a <p>，如下所示：-

<div row style="display:none" id="hideshow" class=" row justify-content-center">
<h1 style="color:#4d9b84 ;font-weight: 700;font-size:25px;margin-top: 15px; ">**********</h1>
<p style="color: #96999b; font-weight: 700; font-size: 100%; margin-bottom: 0px; margin-top: 15px; ">********</p>
</div>

现在在我的 14 英寸屏幕上，我会得到这个正确的布局，下面的标题是：-

在 17 英寸或更宽的屏幕上，我会得到这个布局，它旁边的标题是：-

所以有人可以建议吗？为什么 17 英寸屏幕内的布局被破坏了？

标签： htmlcsstwitter-bootstrap

Answer 1

试试这个

.myDiv {
  display: flex;
  flex-direction: column;
}

<div class="myDiv">
  <h1>h1**********</h1>
  <p>p************</p>
</div>