Bootstrap 4如何将窄文本居中和垂直布置答案

【问题标题】：Bootstrap 4 how to lay out narrow text centred and verticallyBootstrap 4如何将窄文本居中和垂直布置
【发布时间】：2018-11-10 11:27:41
【问题描述】：

我正在尝试布局一些文本 - 标题和段落，但是当我将宽度限制为 50% 时，请使用 w-50 类。文本跳起来与标题水平排列。尝试更改 flex 方向和 align-center 将文本和标题留在左侧。

文字下方的宽度为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>

【问题讨论】：

我不明白你的问题。你是在问为什么当宽度改变时你的文本不能完全保持在<p>标签中的格式？

标签： twitter-bootstrap css flexbox

【解决方案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>

【讨论】：

感谢我删除了 justify-content-center，因为这是不需要的（来自之前尝试安排布局的尝试），但这非常有效。方向改成列的时候还用row类正常吗？