Question

我试图布局一些文字 - 标题和段落，但是当我将宽度限制为50％时，请使用w-50类。文本跳转到与标题水平排列。尝试更改弯曲方向和对齐中心将文本和标题留在左侧。

文字下方的宽度为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：列。使用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>

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

1 个答案: