Bootstrap 6列响应

Question

我希望有6列响应，我创建这个HTML但不是那么好，也许有人可以给我正确的结构和CSS。这里的问题是当我尝试调整窗口大小时，图标和文本不会调整大小。

HTML

.header-block > div {
  float: left;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  max-width: 224px;
}
.header-block span {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  padding-left: 48px;
  color: #262626;
}
.header-block strong {
  display: block;
}
.header-block > div:before {
  font-size: 42px;
  line-height: 42px;
  color: #faa641;
  position: absolute;
  left: 10px;
  top: 5px;
}
.header-block .block1:before {
  content: '\f087';
}
.header-block .block2:before {
  content: '\f0d1';
}
.header-block .block3:before {
  content: '\f021';
}
.header-block .block4:before {
  content: '\f07c';
}
.header-block .block5:before {
  content: '\f082';
}
.header-block .block6:before {
  content: '\f0d6';
}

CSS：

^44^ or ^|^

Answer 1

你的HTML错了。 Cols应该总是在一排。此外，如果修改col填充或其边距，则会破坏引导程序。如果你想触摸你必须通过源（少或sass）。所以你要添加到cols的块类肯定会破坏bootstrap。

<div class="container">
  <div class="row">
    <div class="col-xs-12">Whatever you want full row</div>
    <div class="col-xs-2">1</div>
    <div class="col-xs-2">2</div>
    <div class="col-xs-2">3</div>
    <div class="col-xs-2">4</div>
    <div class="col-xs-2">5</div>
    <div class="col-xs-2">6</div>

  </div>
</div>

这（上图）将为您提供6个响应。如果要嵌套列：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-2">1</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">3</div>
        <div class="col-xs-2">4</div>
        <div class="col-xs-2">5</div>
        <div class="col-xs-2">6</div>
      </div>
    </div>
  </div>
</div>

如果您需要每个col内容都有填充，则必须将填充应用于子div：

...
<div class="col-xs-2">
  <div class="some-padding">
    this content will have padding and not break bootstrap
  </div>
</div>