twitter-bootstrap - Bootstrap 4 如何以居中和垂直方式布置窄文本

Question

我正在尝试布局一些文本 - 一个标题和一个段落，但是当我将宽度限制为 50% 时，比如使用 w-50 类。文字向上跳动与标题横向排列。尝试更改 flex 方向和对齐中心将文本和标题留在左侧。

文本下方的宽度为 75%，如何保持相同的排列但将宽度设置为 50%？ https://codepen.io/anon/pen/YvXyzW

<div class="container">
        <div class="row justify-content-center ">
            <h3 class="pt-5 pb-3">How can ExampleSite help you?</h3>
            <p class="feature-summary w-75">
                With us, not only can you find a great deal, but should your prices go up or something
                better
                come
                on
                the market we can find it automatically.
            </p>
        </div>

</div>

Answer 1

该行是 flex-direction:row，因此只需使用 flex-column 类更改为 flex-direction:column。使用 align-items-center 水平居中。

<div class="container">
     <div class="row justify-content-center flex-column align-items-center">
           <h3 class="pt-5 pb-3">How can ExampleSite help you?</h3>
           <p class="feature-summary w-50">
                    ..
          </p>
     </div>
</div>