使用引导程序创建10列的网格

twa*_*wan 3 css twitter-bootstrap

是否可以使用引导程序创建10列布局? col-md-1给出12并col-md-2给出6,但我需要10.我怎样才能实现呢?这有什么css"hacks"吗?

我正在考虑在彼此旁边粘贴2个5列网格(来自这个问题/答案),但我不确定如何处理它.

小智 6

BOOTSTRAP 3: 如果你想要全宽,你可以使用这个方法.

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

.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;
  }
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

BOOTSTRAP 4: 使用此方法.