Question

我正在使用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并对其进行了测试。

Answer 1

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

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

Answer 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>

bootstrap 4网格不并排放置

2 个答案: