bootstrap 中的着陆页问题

Question

我尝试使用 bootstrap 构建登陆页面。我创建了一个带有图标和

标签的部分。但是 p 和 h3 标签中的文本看起来像这样

这是部分代码：

 <section id="process" class="process">
            <div class="container-fluid container-fluid-max">
                <div class="row text-center py-5 ">
                  <div class="col-12 pb-4">
                    <h2 class="text-red">Lorem, ipsum dolor.</h2>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3 pl-12 pr-12 ml-13 mr-13">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-book"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                       <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                  <div class="col-12 col-sm-6 col-lg-3">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <span class="fa-stack fa-2x">
                            <i class="fas fa-school"></i>
                        </span>
                        <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                      </div>
                  </div>
                </div>
              </div>
        </section>

我想把文字写成一两行。

Answer 1

更正你的代码，你有双倍的块宽度 class="col-12 col-sm-6 col-lg-3"，这样做

<section id="process" class="process">
           <div class="container-fluid container-fluid-max">
               <div class="row text-center py-5 ">
                 <div class="col-12 pb-4">
                   <h2 class="text-red">Lorem, ipsum dolor.</h2>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-book"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                 <div class="col-12 col-sm-6 col-lg-3">
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
                       <span class="fa-stack fa-2x">
                           <i class="fas fa-school"></i>
                       </span>
                       <h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
                       <p>Lorem ipsum dolor sit amet consectetur.</p>
                 </div>
               </div>
             </div>
       </section>

Answer 2

这是因为您在列中声明了列。

<div class="col-12 col-sm-6 col-lg-3">
    <div class="col-12 col-sm-6 col-lg-3">
      ----                     
    </div>
 </div>

在上面的代码中，第二个 div 将在大屏幕 (col-lg-3) 中占用第一个 div 的 3 列 space 和 6 列 space 在小屏幕（col-sm-6）中。它不会占用 1st div

的完整列宽

bootstrap 中的着陆页问题

landing page issue in bootstrap

html

css

web-frontend

twitter-bootstrap