引导程序中的登陆页面问题答案

【问题标题】：landing page issue in bootstrap引导程序中的登陆页面问题
【发布时间】：2020-06-24 10:07:09
【问题描述】：

我尝试使用引导程序构建登录页面。我创建了一个带有图标和

的部分

标签。但是 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>

我想将文本转换为 1 或 2 行。

【问题讨论】：

练习不要在不使用“.row”的情况下在“.col*”中添加“.col*”

标签： html css twitter-bootstrap web-frontend

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

【讨论】：

我将 .mw-100 类添加到第二个 div 并修复了问题。
但是在col 中使用col 是不正确的。更容易删除不必要的类，然后添加一些新的来修复它们

【解决方案2】：

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

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

在上面的代码中，第 2 个 div 在大屏幕（col-lg-3）中占用第 1 个 div 的 3 列空间，在小屏幕（col-sm-6）中占用 6 个列空间。它不会占用第一个 div 的完整列宽

【讨论】：