bootstrap 4网格不并排[重复]答案

【问题标题】：bootstrap 4 grid not staying side by side [duplicate]bootstrap 4网格不并排[重复]
【发布时间】：2018-12-02 09:28:06
【问题描述】：

我正在使用 bootstrap 4.0.0，我有以下代码：

<div class="notice">
 <div class="container">
  <div class="row justify-content-center">
     <div class="col-lg-8">
        <h2>Notice Board</h2>
        <div class="col-lg-6">
           <div class="notice_date">
              23 June <br>2018
           </div>
        </div><!-- end of first col-lg-6 -->
        <div class="col-lg-6">
           <div class="notice_contents">
              <h4><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
           </div>
        </div><!-- end of second col-lg-6 -->
     </div><!-- end of col-lg-8 -->
  </div>

我希望页面中心有一个 8 格行，内容分成两半。但是在这种情况下，内容不是并排并低于另一个，为什么会发生这种情况？我已经添加了 popper.min.js 并测试它工作正常。

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

您似乎需要在 col-lg-8 之后添加一个新行。引导网格系统的工作方式是每一行，最多只能有 12 列。

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

【解决方案2】：

看来您需要将两个 div（使用 class="col-lg-6"）包装在具有行类的父 div 中。

这是一个实时预览：https://jsfiddle.net/kcLzq4bg/

<div class="notice">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-lg-8">
            <h2>Notice Board</h2>
            <div class="row">
               <div class="col-lg-6">
                  <div class="notice_date">
                     23 June <br>2018
                  </div>
               </div>
               <!-- end of first col-lg-6 -->
               <div class="col-lg-6">
                  <div class="notice_contents">
                     <h4><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
                  </div>
               </div>
               <!-- end of second col-lg-6 -->
            </div>
         </div>
         <!-- end of col-lg-8 -->
      </div>
   </div>
</div>

【讨论】：