php - 如何创建 Bootstrap 网格？

Question

我在制作布局 boostrap 时遇到了问题。

我想做这样的事情:

我的脚本有什么问题吗？

  <div class="row">
        <div class="col-md-12">
          <div class="col-md-3">
              <p>Colum 1</p>
          </div>
         <div class="col-md-6">
              <p>Colum 2</p>
         </div>
          <div class="col-md-3">
               <p>Colum 3</p>
          </div>
          <div class="col-md-9">
              <p>Colum 4</p>
          </div>
        </div>
  </div> 

Answer 1

基本上，您不能将 col-* 类嵌套在其他 col-* 类中，它们必须由 row 包裹类(class)。现在，这是我在 Bootstrap 4 上执行您想要的操作的方法。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

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

  <div class="col-3 text-center bg-info">
    Column A1
  </div>

  <div class="col-9">
    <div class="row">
      <div class="col-6 text-center bg-danger">
        <p>Column B1</p>
      </div>
      <div class="col-3 text-center bg-primary">
        <p>Colum B2</p>
      </div>      
      <div class="col-9 text-center bg-warning">
        <p>Colum B3</p>
      </div>
    </div>
  </div>

</div>    
</div>

请注意，我已经删除了 md 断点，这样您无需进入全屏模式就可以看到布局，并且还添加了一些实用程序类，例如 bg-colors 来帮助布局的可视化。