【问题标题】: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>
      

      【讨论】:

        猜你喜欢
        • 2023-04-08
        • 1970-01-01
        • 2018-07-31
        • 1970-01-01
        • 2018-10-18
        • 2018-07-17
        • 2018-03-22
        • 2019-08-11
        • 1970-01-01
        相关资源
        最近更新 更多