css - 使用 bootstrap 创建 10 列的网格

Question

是否可以使用 bootstrap 创建 10 列布局？ col-md-1 给出 12，col-md-2 给出 6，但我需要 10。我该如何实现？是否有任何 css “hacks”？

我正在考虑将 2 个 5 列网格彼此相邻粘贴(来自 this 问题/答案)，但我不确定如何处理。

Answer 1

Bootstrap 3:如果你想要全宽，你可以使用 this aproach .

但是您必须使用:10% 而不是 20% (1/5 *100%):

.col-xs-1-10,
.col-sm-1-10 {
  position: relative;
  min-height: 1px;
}

.col-xs-1-10 {
  width: 10%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-10 {
    width: 10%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-10 {
    width: 10%;
    float: left;
  }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-1-10">
    1
  </div>
  <div class="col-xs-1-10">
    2
  </div>
  <div class="col-xs-1-10">
    3
  </div>
  <div class="col-xs-1-10">
    4
  </div>
  <div class="col-xs-1-10">
    5
  </div>
   <div class="col-xs-1-10">
    6
  </div>
    <div class="col-xs-1-10">
    7
  </div>
  <div class="col-xs-1-10">
    8
  </div>
  <div class="col-xs-1-10">
    9
  </div>
  <div class="col-xs-1-10">
    10
  </div>
</div>

Bootstrap 4:使用 this aproach .