html - Bootstrap 6列响应式

Question

我想要 6 列响应，我创建了这个 html 但不是很好，也许有人可以给我正确的结构和 css。这里的问题是当我尝试调整窗口大小时图标和文本没有调整它的大小。

HTML

<div class="container">
  <div class="row">
    <div class="header-block col-xs-12">
      <div class="block1 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>100% forn&oslash;yd</strong>V&aring;rt m&aring;l!</span></a>
      </div>
      <div class="block2 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Rask levering</strong>stort lager!</span></a>
      </div>
      <div class="block3 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Serviceverksted</strong>Minimal driftstans!</span></a>
      </div>
      <div class="block4 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Kataloger</strong>Se våre produkter!</span></a>
      </div>
      <div class="block6 col-xs-2">
        <a href="{{store%20direct_url="><span><strong>Finansiering</strong>Fleksible løsninger!</span></a>
      </div>
      <div class="block5 col-xs-2">
        <a href="https://www.facebook.com/diaproff/" target="_blank"><span><strong>Hold kontakten</strong>Følg oss på facebook!</span></a>
      </div>
    </div>
  </div>
</div>

CSS:

.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';
}

Answer 1

您的 html 有误。 Cols 应该总是在一行内。此外，如果您修改 col padding 或其边距，则会破坏 Bootstrap 。如果你想触摸它，你必须通过源代码(less 或 sass)来做。因此，您要添加到 cols 的 block 类肯定会破坏 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>