Question

在同一页面中，我有两个不同布局的部分：

13栏：没有排水沟
12列：gutter 30px

使用bootstrap 3有没有办法实现这个目标？我可以使用网格的配置，但它是跨站点和跨页面。所以我想我正在寻找类似的东西：

    <div className="container grid-1">
            <div className="row">
                <div className="col-sm-3">
                    ...
                </div>
                <div className="col-sm-3">

                </div>
                <div className="col-sm-3">

                </div>
                <div className="col-sm-3">

                </div>
      </div>

      <div className="container grid-2">
            <div className="row">
                <div className="col-sm-6">
                    ...
                </div>
                <div className="col-sm-1">

                </div>
                <div className="col-sm-6">

                </div>                  
      </div>

Answer 1

是的，您可以生成13列网格 here 。然后，您可以为col类添加前缀，例如grid-13类，并为没有排水沟添加样式。

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      ...
    </div>
    <div class="col-sm-3">
      ...
    </div>
    <div class="col-sm-3">
      ...
    </div>
    <div class="col-sm-3">
      ...
    </div>
  </div>
</div>
<div class="container">
  <div class="row grid-13 no-gutters">
    <div class="col-sm-6">
      ...
    </div>
    <div class="col-sm-1">
      ...
    </div>
    <div class="col-sm-6">
      ...
    </div>
  </div>
</div>

CSS：

.grid-13 .col-xs-1, .grid-13 .col-xs-2, .grid-13 .col-xs-3, .grid-13 .col-xs-4, .grid-13 .col-xs-5, .grid-13 .col-xs-6, .grid-13 .col-xs-7, .grid-13 .col-xs-8, .grid-13 .col-xs-9, .grid-13 .col-xs-10, .grid-13 .col-xs-11, .grid-13 .col-xs-12, .grid-13 .col-xs-13 {
  float: left;
}
.grid-13 .col-xs-13 {
  width: 100%;
}
.grid-13 .col-xs-12 {
  width: 92.30769231%;
}
.grid-13 .col-xs-11 {
  width: 84.61538462%;
}
.grid-13 .col-xs-10 {
  width: 76.92307692%;
}
.grid-13 .col-xs-9 {
  width: 69.23076923%;
}
.grid-13 .col-xs-8 {
  width: 61.53846154%;
}
.grid-13 .col-xs-7 {
  width: 53.84615385%;
}
.grid-13 .col-xs-6 {
  width: 46.15384615%;
}
.grid-13 .col-xs-5 {
  width: 38.46153846%;
}
.grid-13 .col-xs-4 {
  width: 30.76923077%;
}
.grid-13 .col-xs-3 {
  width: 23.07692308%;
}
.grid-13 .col-xs-2 {
  width: 15.38461538%;
}
.grid-13 .col-xs-1 {
  width: 7.69230769%;
}
.grid-13 .col-xs-pull-13 {
  right: 100%;
}
.grid-13 .col-xs-pull-12 {
  right: 92.30769231%;
}
.grid-13 .col-xs-pull-11 {
  right: 84.61538462%;
}
.grid-13 .col-xs-pull-10 {
  right: 76.92307692%;
}
.grid-13 .col-xs-pull-9 {
  right: 69.23076923%;
}
.grid-13 .col-xs-pull-8 {
  right: 61.53846154%;
}
.grid-13 .col-xs-pull-7 {
  right: 53.84615385%;
}
.grid-13 .col-xs-pull-6 {
  right: 46.15384615%;
}
.grid-13 .col-xs-pull-5 {
  right: 38.46153846%;
}
.grid-13 .col-xs-pull-4 {
  right: 30.76923077%;
}
.grid-13 .col-xs-pull-3 {
  right: 23.07692308%;
}
.grid-13 .col-xs-pull-2 {
  right: 15.38461538%;
}
.grid-13 .col-xs-pull-1 {
  right: 7.69230769%;
}
.grid-13 .col-xs-pull-0 {
  right: auto;
}
.grid-13 .col-xs-push-13 {
  left: 100%;
}
.grid-13 .col-xs-push-12 {
  left: 92.30769231%;
}
.grid-13 .col-xs-push-11 {
  left: 84.61538462%;
}
.grid-13 .col-xs-push-10 {
  left: 76.92307692%;
}
.grid-13 .col-xs-push-9 {
  left: 69.23076923%;
}
.grid-13 .col-xs-push-8 {
  left: 61.53846154%;
}
.grid-13 .col-xs-push-7 {
  left: 53.84615385%;
}
.grid-13 .col-xs-push-6 {
  left: 46.15384615%;
}
.grid-13 .col-xs-push-5 {
  left: 38.46153846%;
}
.grid-13 .col-xs-push-4 {
  left: 30.76923077%;
}
.grid-13 .col-xs-push-3 {
  left: 23.07692308%;
}
.grid-13 .col-xs-push-2 {
  left: 15.38461538%;
}
.grid-13 .col-xs-push-1 {
  left: 7.69230769%;
}
.grid-13 .col-xs-push-0 {
  left: auto;
}
.grid-13 .col-xs-offset-13 {
  margin-left: 100%;
}
.grid-13 .col-xs-offset-12 {
  margin-left: 92.30769231%;
}
.grid-13 .col-xs-offset-11 {
  margin-left: 84.61538462%;
}
.grid-13 .col-xs-offset-10 {
  margin-left: 76.92307692%;
}
.grid-13 .col-xs-offset-9 {
  margin-left: 69.23076923%;
}
.grid-13 .col-xs-offset-8 {
  margin-left: 61.53846154%;
}
.grid-13 .col-xs-offset-7 {
  margin-left: 53.84615385%;
}
.grid-13 .col-xs-offset-6 {
  margin-left: 46.15384615%;
}
.grid-13 .col-xs-offset-5 {
  margin-left: 38.46153846%;
}
.grid-13 .col-xs-offset-4 {
  margin-left: 30.76923077%;
}
.grid-13 .col-xs-offset-3 {
  margin-left: 23.07692308%;
}
.grid-13 .col-xs-offset-2 {
  margin-left: 15.38461538%;
}
.grid-13 .col-xs-offset-1 {
  margin-left: 7.69230769%;
}
.grid-13 .col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .grid-13 .col-sm-1, .grid-13 .col-sm-2, .grid-13 .col-sm-3, .grid-13 .col-sm-4, .grid-13 .col-sm-5, .grid-13 .col-sm-6, .grid-13 .col-sm-7, .grid-13 .col-sm-8, .grid-13 .col-sm-9, .grid-13 .col-sm-10, .grid-13 .col-sm-11, .grid-13 .col-sm-12, .grid-13 .col-sm-13 {
    float: left;
  }
  .grid-13 .col-sm-13 {
    width: 100%;
  }
  .grid-13 .col-sm-12 {
    width: 92.30769231%;
  }
  .grid-13 .col-sm-11 {
    width: 84.61538462%;
  }
  .grid-13 .col-sm-10 {
    width: 76.92307692%;
  }
  .grid-13 .col-sm-9 {
    width: 69.23076923%;
  }
  .grid-13 .col-sm-8 {
    width: 61.53846154%;
  }
  .grid-13 .col-sm-7 {
    width: 53.84615385%;
  }
  .grid-13 .col-sm-6 {
    width: 46.15384615%;
  }
  .grid-13 .col-sm-5 {
    width: 38.46153846%;
  }
  .grid-13 .col-sm-4 {
    width: 30.76923077%;
  }
  .grid-13 .col-sm-3 {
    width: 23.07692308%;
  }
  .grid-13 .col-sm-2 {
    width: 15.38461538%;
  }
  .grid-13 .col-sm-1 {
    width: 7.69230769%;
  }
  .grid-13 .col-sm-pull-13 {
    right: 100%;
  }
  .grid-13 .col-sm-pull-12 {
    right: 92.30769231%;
  }
  .grid-13 .col-sm-pull-11 {
    right: 84.61538462%;
  }
  .grid-13 .col-sm-pull-10 {
    right: 76.92307692%;
  }
  .grid-13 .col-sm-pull-9 {
    right: 69.23076923%;
  }
  .grid-13 .col-sm-pull-8 {
    right: 61.53846154%;
  }
  .grid-13 .col-sm-pull-7 {
    right: 53.84615385%;
  }
  .grid-13 .col-sm-pull-6 {
    right: 46.15384615%;
  }
  .grid-13 .col-sm-pull-5 {
    right: 38.46153846%;
  }
  .grid-13 .col-sm-pull-4 {
    right: 30.76923077%;
  }
  .grid-13 .col-sm-pull-3 {
    right: 23.07692308%;
  }
  .grid-13 .col-sm-pull-2 {
    right: 15.38461538%;
  }
  .grid-13 .col-sm-pull-1 {
    right: 7.69230769%;
  }
  .grid-13 .col-sm-pull-0 {
    right: auto;
  }
  .grid-13 .col-sm-push-13 {
    left: 100%;
  }
  .grid-13 .col-sm-push-12 {
    left: 92.30769231%;
  }
  .grid-13 .col-sm-push-11 {
    left: 84.61538462%;
  }
  .grid-13 .col-sm-push-10 {
    left: 76.92307692%;
  }
  .grid-13 .col-sm-push-9 {
    left: 69.23076923%;
  }
  .grid-13 .col-sm-push-8 {
    left: 61.53846154%;
  }
  .grid-13 .col-sm-push-7 {
    left: 53.84615385%;
  }
  .grid-13 .col-sm-push-6 {
    left: 46.15384615%;
  }
  .grid-13 .col-sm-push-5 {
    left: 38.46153846%;
  }
  .grid-13 .col-sm-push-4 {
    left: 30.76923077%;
  }
  .grid-13 .col-sm-push-3 {
    left: 23.07692308%;
  }
  .grid-13 .col-sm-push-2 {
    left: 15.38461538%;
  }
  .grid-13 .col-sm-push-1 {
    left: 7.69230769%;
  }
  .grid-13 .col-sm-push-0 {
    left: auto;
  }
  .grid-13 .col-sm-offset-13 {
    margin-left: 100%;
  }
  .grid-13 .col-sm-offset-12 {
    margin-left: 92.30769231%;
  }
  .grid-13 .col-sm-offset-11 {
    margin-left: 84.61538462%;
  }
  .grid-13 .col-sm-offset-10 {
    margin-left: 76.92307692%;
  }
  .grid-13 .col-sm-offset-9 {
    margin-left: 69.23076923%;
  }
  .grid-13 .col-sm-offset-8 {
    margin-left: 61.53846154%;
  }
  .grid-13 .col-sm-offset-7 {
    margin-left: 53.84615385%;
  }
  .grid-13 .col-sm-offset-6 {
    margin-left: 46.15384615%;
  }
  .grid-13 .col-sm-offset-5 {
    margin-left: 38.46153846%;
  }
  .grid-13 .col-sm-offset-4 {
    margin-left: 30.76923077%;
  }
  .grid-13 .col-sm-offset-3 {
    margin-left: 23.07692308%;
  }
  .grid-13 .col-sm-offset-2 {
    margin-left: 15.38461538%;
  }
  .grid-13 .col-sm-offset-1 {
    margin-left: 7.69230769%;
  }
  .grid-13 .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .grid-13 .col-md-1, .grid-13 .col-md-2, .grid-13 .col-md-3, .grid-13 .col-md-4, .grid-13 .col-md-5, .grid-13 .col-md-6, .grid-13 .col-md-7, .grid-13 .col-md-8, .grid-13 .col-md-9, .grid-13 .col-md-10, .grid-13 .col-md-11, .grid-13 .col-md-12, .grid-13 .col-md-13 {
    float: left;
  }
  .grid-13 .col-md-13 {
    width: 100%;
  }
  .grid-13 .col-md-12 {
    width: 92.30769231%;
  }
  .grid-13 .col-md-11 {
    width: 84.61538462%;
  }
  .grid-13 .col-md-10 {
    width: 76.92307692%;
  }
  .grid-13 .col-md-9 {
    width: 69.23076923%;
  }
  .grid-13 .col-md-8 {
    width: 61.53846154%;
  }
  .grid-13 .col-md-7 {
    width: 53.84615385%;
  }
  .grid-13 .col-md-6 {
    width: 46.15384615%;
  }
  .grid-13 .col-md-5 {
    width: 38.46153846%;
  }
  .grid-13 .col-md-4 {
    width: 30.76923077%;
  }
  .grid-13 .col-md-3 {
    width: 23.07692308%;
  }
  .grid-13 .col-md-2 {
    width: 15.38461538%;
  }
  .grid-13 .col-md-1 {
    width: 7.69230769%;
  }
  .grid-13 .col-md-pull-13 {
    right: 100%;
  }
  .grid-13 .col-md-pull-12 {
    right: 92.30769231%;
  }
  .grid-13 .col-md-pull-11 {
    right: 84.61538462%;
  }
  .grid-13 .col-md-pull-10 {
    right: 76.92307692%;
  }
  .grid-13 .col-md-pull-9 {
    right: 69.23076923%;
  }
  .grid-13 .col-md-pull-8 {
    right: 61.53846154%;
  }
  .grid-13 .col-md-pull-7 {
    right: 53.84615385%;
  }
  .grid-13 .col-md-pull-6 {
    right: 46.15384615%;
  }
  .grid-13 .col-md-pull-5 {
    right: 38.46153846%;
  }
  .grid-13 .col-md-pull-4 {
    right: 30.76923077%;
  }
  .grid-13 .col-md-pull-3 {
    right: 23.07692308%;
  }
  .grid-13 .col-md-pull-2 {
    right: 15.38461538%;
  }
  .grid-13 .col-md-pull-1 {
    right: 7.69230769%;
  }
  .grid-13 .col-md-pull-0 {
    right: auto;
  }
  .grid-13 .col-md-push-13 {
    left: 100%;
  }
  .grid-13 .col-md-push-12 {
    left: 92.30769231%;
  }
  .grid-13 .col-md-push-11 {
    left: 84.61538462%;
  }
  .grid-13 .col-md-push-10 {
    left: 76.92307692%;
  }
  .grid-13 .col-md-push-9 {
    left: 69.23076923%;
  }
  .grid-13 .col-md-push-8 {
    left: 61.53846154%;
  }
  .grid-13 .col-md-push-7 {
    left: 53.84615385%;
  }
  .grid-13 .col-md-push-6 {
    left: 46.15384615%;
  }
  .grid-13 .col-md-push-5 {
    left: 38.46153846%;
  }
  .grid-13 .col-md-push-4 {
    left: 30.76923077%;
  }
  .grid-13 .col-md-push-3 {
    left: 23.07692308%;
  }
  .grid-13 .col-md-push-2 {
    left: 15.38461538%;
  }
  .grid-13 .col-md-push-1 {
    left: 7.69230769%;
  }
  .grid-13 .col-md-push-0 {
    left: auto;
  }
  .grid-13 .col-md-offset-13 {
    margin-left: 100%;
  }
  .grid-13 .col-md-offset-12 {
    margin-left: 92.30769231%;
  }
  .grid-13 .col-md-offset-11 {
    margin-left: 84.61538462%;
  }
  .grid-13 .col-md-offset-10 {
    margin-left: 76.92307692%;
  }
  .grid-13 .col-md-offset-9 {
    margin-left: 69.23076923%;
  }
  .grid-13 .col-md-offset-8 {
    margin-left: 61.53846154%;
  }
  .grid-13 .col-md-offset-7 {
    margin-left: 53.84615385%;
  }
  .grid-13 .col-md-offset-6 {
    margin-left: 46.15384615%;
  }
  .grid-13 .col-md-offset-5 {
    margin-left: 38.46153846%;
  }
  .grid-13 .col-md-offset-4 {
    margin-left: 30.76923077%;
  }
  .grid-13 .col-md-offset-3 {
    margin-left: 23.07692308%;
  }
  .grid-13 .col-md-offset-2 {
    margin-left: 15.38461538%;
  }
  .grid-13 .col-md-offset-1 {
    margin-left: 7.69230769%;
  }
  .grid-13 .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .grid-13 .col-lg-1, .grid-13 .col-lg-2, .grid-13 .col-lg-3, .grid-13 .col-lg-4, .grid-13 .col-lg-5, .grid-13 .col-lg-6, .grid-13 .col-lg-7, .grid-13 .col-lg-8, .grid-13 .col-lg-9, .grid-13 .col-lg-10, .grid-13 .col-lg-11, .grid-13 .col-lg-12, .grid-13 .col-lg-13 {
    float: left;
  }
  .grid-13 .col-lg-13 {
    width: 100%;
  }
  .grid-13 .col-lg-12 {
    width: 92.30769231%;
  }
  .grid-13 .col-lg-11 {
    width: 84.61538462%;
  }
  .grid-13 .col-lg-10 {
    width: 76.92307692%;
  }
  .grid-13 .col-lg-9 {
    width: 69.23076923%;
  }
  .grid-13 .col-lg-8 {
    width: 61.53846154%;
  }
  .grid-13 .col-lg-7 {
    width: 53.84615385%;
  }
  .grid-13 .col-lg-6 {
    width: 46.15384615%;
  }
  .grid-13 .col-lg-5 {
    width: 38.46153846%;
  }
  .grid-13 .col-lg-4 {
    width: 30.76923077%;
  }
  .grid-13 .col-lg-3 {
    width: 23.07692308%;
  }
  .grid-13 .col-lg-2 {
    width: 15.38461538%;
  }
  .grid-13 .col-lg-1 {
    width: 7.69230769%;
  }
  .grid-13 .col-lg-pull-13 {
    right: 100%;
  }
  .grid-13 .col-lg-pull-12 {
    right: 92.30769231%;
  }
  .grid-13 .col-lg-pull-11 {
    right: 84.61538462%;
  }
  .grid-13 .col-lg-pull-10 {
    right: 76.92307692%;
  }
  .grid-13 .col-lg-pull-9 {
    right: 69.23076923%;
  }
  .grid-13 .col-lg-pull-8 {
    right: 61.53846154%;
  }
  .grid-13 .col-lg-pull-7 {
    right: 53.84615385%;
  }
  .grid-13 .col-lg-pull-6 {
    right: 46.15384615%;
  }
  .grid-13 .col-lg-pull-5 {
    right: 38.46153846%;
  }
  .grid-13 .col-lg-pull-4 {
    right: 30.76923077%;
  }
  .grid-13 .col-lg-pull-3 {
    right: 23.07692308%;
  }
  .grid-13 .col-lg-pull-2 {
    right: 15.38461538%;
  }
  .grid-13 .col-lg-pull-1 {
    right: 7.69230769%;
  }
  .grid-13 .col-lg-pull-0 {
    right: auto;
  }
  .grid-13 .col-lg-push-13 {
    left: 100%;
  }
  .grid-13 .col-lg-push-12 {
    left: 92.30769231%;
  }
  .grid-13 .col-lg-push-11 {
    left: 84.61538462%;
  }
  .grid-13 .col-lg-push-10 {
    left: 76.92307692%;
  }
  .grid-13 .col-lg-push-9 {
    left: 69.23076923%;
  }
  .grid-13 .col-lg-push-8 {
    left: 61.53846154%;
  }
  .grid-13 .col-lg-push-7 {
    left: 53.84615385%;
  }
  .grid-13 .col-lg-push-6 {
    left: 46.15384615%;
  }
  .grid-13 .col-lg-push-5 {
    left: 38.46153846%;
  }
  .grid-13 .col-lg-push-4 {
    left: 30.76923077%;
  }
  .grid-13 .col-lg-push-3 {
    left: 23.07692308%;
  }
  .grid-13 .col-lg-push-2 {
    left: 15.38461538%;
  }
  .grid-13 .col-lg-push-1 {
    left: 7.69230769%;
  }
  .grid-13 .col-lg-push-0 {
    left: auto;
  }
  .grid-13 .col-lg-offset-13 {
    margin-left: 100%;
  }
  .grid-13 .col-lg-offset-12 {
    margin-left: 92.30769231%;
  }
  .grid-13 .col-lg-offset-11 {
    margin-left: 84.61538462%;
  }
  .grid-13 .col-lg-offset-10 {
    margin-left: 76.92307692%;
  }
  .grid-13 .col-lg-offset-9 {
    margin-left: 69.23076923%;
  }
  .grid-13 .col-lg-offset-8 {
    margin-left: 61.53846154%;
  }
  .grid-13 .col-lg-offset-7 {
    margin-left: 53.84615385%;
  }
  .grid-13 .col-lg-offset-6 {
    margin-left: 46.15384615%;
  }
  .grid-13 .col-lg-offset-5 {
    margin-left: 38.46153846%;
  }
  .grid-13 .col-lg-offset-4 {
    margin-left: 30.76923077%;
  }
  .grid-13 .col-lg-offset-3 {
    margin-left: 23.07692308%;
  }
  .grid-13 .col-lg-offset-2 {
    margin-left: 15.38461538%;
  }
  .grid-13 .col-lg-offset-1 {
    margin-left: 7.69230769%;
  }
  .grid-13 .col-lg-offset-0 {
    margin-left: 0%;
  }
}

.no-gutters {
  margin-left: 0;
  margin-right: 0;
}
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

Bootstrap 3具有不同的网格，用于同一页面的不同部分

1 个答案:

CODEPEN