Css 引导网格不工作

我正在尝试使用引导创建页面布局。我的布局与下图类似

为了对此进行归档，我尝试使用引导网格功能

这就是我的html的样子

  <div class="myLayout">
    <div class="col-1">
    </div>    
    <div class="col-2">
    </div>    
    <div class="col-3">
    </div>
  </div>

更新：

这是从大约更少的资源生成CSS

但这对我的预期结果不起作用。有人能告诉我我的代码出了什么问题吗？

---

谢谢。

实现这一点不需要定制CSS/LESS代码。您可以使用现有的引导网格系统类来实现这一点

div{ 高度：200px； } .首先{ 背景色：黑色； } .第二{ 背景颜色：蓝色； } .第三{ 背景色：红色； }

---

应该不需要定制CSS/LESS代码来实现这一点。您可以使用现有的引导网格系统类来实现这一点

div{ 高度：200px； } .首先{ 背景色：黑色； } .第二{ 背景颜色：蓝色； } .第三{ 背景色：红色； }

---

---

我不相信0是make sm列mixin in.col3的可接受值。LESS文件的最终输出是什么样子的？@Joe是的，亲爱的，我尝试过删除它。但不起作用。在每个屏幕大小中只显示前2列。为什么不使用现有的引导类，而不是用自己的样式重新创建列？ie：给第一列一个col-1 col-md-6 col-sm-7 col-xs-12类？您的.make-*-列顺序不正确，请参见。我不相信0是make sm column mixin.col3的可接受值。LESS文件的最终输出是什么样子的？@Joe是的，亲爱的，我尝试过删除它。但不起作用。在每个屏幕大小中只显示前2列。为什么不使用现有的引导类，而不是用自己的样式重新创建列？ie：给第一列一个col-1 col-md-6 col-sm-7 col-xs-12类？你的.make-*-列顺序不正确，请看。我将你的代码更改为代码片段，这样你就不必依赖bootply，因为它现在似乎经常关闭。是的，看到了通知。我还得进一步调查。谢谢是的，它起作用了。。但我希望保持标记的干净，而不使用更多的类和ID。这就是为什么我使用CSS/LESS来制作这个happen@TNK然而，想要这样做，你就让你的生活变得不那么复杂了。实际上，您喜欢凌乱、不必要的复杂代码，以保持HTML更干净。不要重新发明轮子，也不要为了实现目标而做更多的工作。@TNK这是一种有缺陷和危险的思维方式。类和ID不会使标记变脏。他们的工作是识别元素，以便在其他资源中引用它们。此外，如果您担心将要使用的类的数量，那么您不应该加载相当繁重的前端框架。我将您的代码更改为代码段，这样您就不必依赖bootply，因为它现在似乎经常停止运行。是的，我看到了通知。我还得进一步调查。谢谢是的，它起作用了。。但我希望保持标记的干净，而不使用更多的类和ID。这就是为什么我使用CSS/LESS来制作这个happen@TNK然而，想要这样做，你就让你的生活变得不那么复杂了。实际上，您喜欢凌乱、不必要的复杂代码，以保持HTML更干净。不要重新发明轮子，也不要为了实现目标而做更多的工作。@TNK这是一种有缺陷和危险的思维方式。类和ID不会使标记变脏。他们的工作是识别元素，以便在其他资源中引用它们。此外，如果您担心将要使用的类的数量，那么不应该加载相当沉重的前端框架

.myLayout {
  .make-row();
  
  .col-1 {
    .make-md-column(6);
    .make-sm-column(7);
    .make-xs-column(12);
    background: black;
    height: 100px;
  }  
  
  .col-2 {
    .make-md-column(3);
    .make-sm-column(5);
    .make-xs-column(6);
    background: blue;
    height: 100px;
  }  
 
  .col-3 {
    .make-md-column(3);
    .make-sm-column(0);
    .make-xs-column(6);
    .visible-lg-block;
    background: red;
    height: 100px;
  }
}

.col-1 {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
    background: black;
  height: 100px;
}

@media (min-width: 992px) {
  .col-1 {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .col-1 {
    float: left;
    width: 58.33333333%;
  }
}
@media (min-width: 1200px) {
  .col-1 {
    height: 292px;
  }
}

.col-2 {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
    background: blue;
  height: 100px;
}

@media (min-width: 992px) {
  .col-2 {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .col-2 {
    float: left;
    width: 41.66666667%;
  }
}
@media (min-width: 1200px) {
  .col-2 {
    height: 292px;
  }
}

.col-3 {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  display: none !important;
    background: red;
  height: 100px;
    
}
@media (min-width: 992px) {
  .col-3 {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .col-3 {
    float: left;
    width: 0%;
  }
}
@media (min-width: 1200px) {
  .col-3 {
    display: block !important;
  }
}