Question

table-> tr> td 几乎相当于 container-fluid-> row-> col-* or col-*-*

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

让我们看看下面的问题，

我希望将三个元素组合在div下的div class=row下，如下所示，它应该会生成工作部分演示示例。 （请暂时忽略我的自定义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

Answer 1

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

但要回答你的问题，那就是“工作”。上面的示例是因为您正确地执行了此操作。您不需要像您认为的那样在部分周围使用col-12包装器，如果您想要那样，那么您需要嵌套另一个内部类=＆＃34; row＆＃34;在里面，包裹内在的内容。

请参阅＆＃34;嵌套＆＃34;：http://getbootstrap.com/docs/4.0/layout/grid/#nesting

bootstrap 4网格系统问题

1 个答案: