Question

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

enter image description here

为了存档，我尝试使用bootstrap网格功能。

这就是我的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>

Bootstrap网格无法正常工作

1 个答案: