如何创建引导网格？答案

【问题标题】：How to create a grid of bootstrap?如何创建引导网格？
【发布时间】：2019-06-23 06:47:12
【问题描述】：

我在制作布局 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>

【问题讨论】：

您使用的是什么版本的引导程序？

标签： php html css twitter-bootstrap frontend

【解决方案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 以帮助布局可视化。

【讨论】：

谢谢，它有效。我喜欢上面脚本的结构。 :)

【解决方案2】：

此代码将对您有所帮助。

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

【讨论】：

这可能是一个非常好的通过在列中给出固定大小值。非常感谢大师
不客气，如果我的回答适合你，请考虑支持@SitiRahmah

【解决方案3】：

我猜你需要创建嵌套行。尝试一下

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

【讨论】：

是的，我会尝试在前端进行实验，感谢您的建议。 :D