bootstrap 4网格系统问题答案

【问题标题】：bootstrap 4 grid system issuebootstrap 4网格系统问题
【发布时间】：2018-03-03 14:48:40
【问题描述】：

table-> tr> td 几乎等同于 container-fluid-> row-> col-* or col-*-*

我的问题很简单，但也许我不知道 bootstrap 4 网格系统是如何工作的。

让我们看看我下面的问题，

我想通过将三个元素包装在div class=row 下的外部div 中来对它们进行分组，如下所示，它应该会产生工作部分演示示例。 （请暂时忽略我的自定义 css 类）

所以问题是当我使用外部 div 时，它只会弄乱布局。

<div class="container-fluid">
  <div class="row">
       <div class="col-12"> <!-- here ---- i tried class="col-12 or col-md-12 -->

          <h2 class="curriculum-vitae col-md-6 text-right">Text1</h2>
          <h2 class="resume-name col-md-6 text-left">text2</h2>
          <h6 class="resume-address text-center col-md-12">abcdefghijklmnopqrstuvwxyz</h6>

        </div>


        <div class="col-12"> <!-- i tried class="col-12 or col-md-12" -->

           <div class="col-md-5 text-right resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div>
           <div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div>
           <div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> &nbsp;<a href="">abcde</a></div>

        </div>
  </div>
</div>

没有外部 div，它看起来和工作都很好。

<div class="container-fluid">
    <div class="row">

            <h2 class="curriculum-vitae col-md-6 text-right">Text1</h2>
            <h2 class="resume-name col-md-6 text-left">text2</h2>
            <h6 class="resume-address text-center col-md-12">abcdefghijklmnopqrstuvwxyz</h6>


            <div class="col-md-5 text-right resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div>
            <div class="col-md-2 text-center resume-mobile"><i class="fa fa-mobile" aria-hidden="true"></i>&nbsp;<span>abcde</span></div>
            <div class="col-md-5 text-left resume-email"><i class="fa fa-envelope-o" aria-hidden="true"></i> &nbsp;<a href="">abcde</a></div>

    </div>
</div>

问题的重现（只需最大化输出窗口以获得确切的结果）

https://plnkr.co/edit/fk0uO3Z9fR1EVEc79Xb3?p=preview

【问题讨论】：

标签： bootstrap-4 twitter-bootstrap-4 grid-system

【解决方案1】：

首先，您在 bootstrap.css 之前而不是之后加载 style.css - 您应该在 bootstrap 之后加载主题以便正确覆盖。其次，您没有在页脚中包含引导 js，因此您不会从任何增强的引导功能中受益。

但要回答您的问题，上面的“工作”示例是因为您做得正确。您不需要像您认为的那样在部分周围使用 col-12 包装器，如果您确实需要，那么您需要在其中嵌套另一个内部 class="row" ，包装内部内容。

见“嵌套”：http://getbootstrap.com/docs/4.0/layout/grid/#nesting

【讨论】：