引导网格不起作用[重复]

Question

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

为此我尝试使用引导网格函数进行存档。

这就是我的html 的样子

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

在我的less 文件中

.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;
  }
}

更新：

这是从大约Less生成CSS

.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;
  }
}

但这不符合我的预期结果。有人可以告诉我我的代码有什么问题吗？ 谢谢。

Answer 1

应该不需要任何自定义 CSS/LESS 代码来实现这一点。 您可以使用现有的 Bootstrap 网格系统类来做到这一点。

BOOTPLY

div {
  height: 200px;
}
.first {
  background-color: black;
}
.second {
  background-color: blue;
}
.third {
  background-color: red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="first col-sm-6 col-xs-12"></div>
<div class="second col-lg-3 col-sm-6 col-xs-12"></div>
<div class="third col-lg-3 visible-lg-inline"></div>