html - 如何生成中间宽度的列而不是 Bootstrap 的默认列宽

Question

我最近开始研究 bootstrap。根据我的要求， Bootstrap 的默认列宽效果不佳。我想将 col-xs-1 和 col-xs-2 之间的宽度进一步分成 12 个值，这样我就可以得到类似 col-xs- 1.1、col-xs-1.2、col-xs-1.3 ..... col-xs-1.12。

我想知道这样做的准确方法，因为当我尝试计算这些宽度并在媒体查询中指定它们时，小屏幕上的行为很奇怪。

请建议我如何生成这些类，这些类具有与默认 col-- 相关的所有属性以及所需的宽度

谢谢

Answer 1

您只需使用嵌套列即可做到这一点。所以...在您的 2 列中的每一列中，您基本上可以根据需要再拆分 12 个。这是一个示例，但您应该明白了:

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-4">
        Nested
      </div>
      <div class="col-sm-4">
        Nested
      </div>
      <div class="col-sm-4">
        Nested
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-4">
        Nested
      </div>
      <div class="col-sm-4">
        Nested
      </div>
      <div class="col-sm-4">
        Nested
      </div>
    </div>
  </div>
</div>