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类包装。现在，这是我在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以帮助可视化布局。

Answer 2

我想您需要创建嵌套行。尝试尝试

 <div class="row">
      <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="row">
      <div class="col-md-9">
          <p>Colum 4</p>
      </div>
   </div>

Answer 3

此代码将对您有所帮助。

<div class="container">
  <div class="row">
    <div class="col-md-3" style="height:700px;background:red;">
      <div class="" role="complementary">
                  col-md-3
      </div>
    </div>
    <div class="col-md-9" style="height:700px;"  >
      <div class="col-md-6" style="height:350px;background:green;">.col-md-6</div>
        <div class="col-md-3" style="height:350px;background:pink;">.col-md-3</div>
         <div class="col-md-9" style="height:350px;background:blue;">.col-md-9</div>
    </div>
  </div>
</div>

如何创建引导网格？

3 个答案: