Bootstrap: 在父元素上指定列大小

Question

通常使用 Bootstrap，您可以在元素本身上指定 <div> 的列大小，如下所示：

<div id="attribute-value-container">
    <div class="row">
        <div class="col-sm-4">
            Attribute 1
        </div>
        <div class="col-sm-8">
            Value 1
        </div>
    </div>
    <!-- Multiple additional rows of attribute-value pairs -->
</div>

但是例如当构建具有多行相似样式的属性值对的表单时，在父元素上指定它是有益的，如下所示：

<div id="attribute-value-container" class="first-col-sm-4 second-col-sm-8">
    <div class="row">
        <div>
            Attribute 1
        </div>
        <div>
            Value 1
        </div>
    </div>
    <!-- Multiple additional rows of attribute-value pairs -->
</div>

...可能 div 上的一些类应该接收样式。

另一种方法是使用第一行作为模板，并将此样式应用于后续行。

我假设这不是 Bootstrap 核心 CSS 的一部分。是否有第 3 方 CSS 附加库可用？是否已为未来的 Bootstrap 版本提出建议（我刚才自己将其添加到 issue tracker）？感谢指向相关 libraries/documentation/discussion 的指针。

（我想这一定是其他人提出的，而不是我自己，但我没有找到任何主题。我想我错过了正确的关键字或术语。如果这是重复的，抱歉。）

Answer 1

这不是 bootstrap 真正会实现的东西，因为它最多可以达到 N 列。指定每一行，因为每一行可能不同。如果你想要这个脚手架之外的东西，使用一些 CSS 和 nth-child.

很容易自己做。

示例：https://jsfiddle.net/54ko3Le6/1/

HTML:

<div id="attribute-value-container" class="cols">
        <div>
            Attribute 1
        </div>
        <div>
            Value 1
        </div>
        <div>
            Attribute 2
        </div>
        <div>
            Value 2
        </div>
    <!-- Multiple additional rows of attribute-value pairs -->
</div>

CSS:

.cols {
  width:100%;
}

.cols > div:nth-child(even) {
  width:67%;
  float:right;
  background-color:red;
}

.cols > div:nth-child(odd) {
   width:33%;
   float:left;
   background-color:green;
}

结果：

Answer 2

Bootstrap 与预定义的 classes 一起使用，您应该按预期使用这些 classes。

On my current template, I have 11 attribute-value pairs, so I would save 20 ((11-1)*2) classes if I could specify this on a parent or template element. This would improve brevity (and, in my opinion, legibility) and reduce room for errors.

Bootstrap 4 是用 Sass 构建的，因此您可以编译自己的版本，这更适合您的情况。来自 documentation:

To use our Gruntfile and run our documentation locally, you’ll need a copy of Bootstrap’s source files, Node, and Grunt. Follow these steps and you should be ready to rock:

Download and install Node, which we use to manage our dependencies.

Install the Grunt command line tools, grunt-cli, with npm install -g grunt-cli.

Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.

Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.

When completed, you’ll be able to run the various Grunt commands provided from the command line.

根据您的情况，您可以使用 Sass @extend 或 Bootstrap 的网格混入。

Sass @extend 参见 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend。

Sass代码：

.attribute-value-container {
  @extend .container;
  > div { 
    @extend .row;
    > div:first-child {
      @extend .col-sm-4;
    }
    > div:last-child {
      @extend .col-sm-8;
    }
  }
}

现在你可以使用 HTML 只有 1 attribute-value-container class:

<div class="attribute-value-container">
    <div>
        <div>
            Attribute 1
        </div>
        <div>
            Value 1
        </div>
    </div>
    <!-- Multiple additional rows of attribute-value pairs -->
</div>

上面你的 HTML 代码变小了，但是你的 CSS 变大了。扩展在编译的 CSS 代码中添加选择器。

.row 的已编译 CSS 代码现在如下所示：

.row, .attribute-value-container > div {
  margin-left: -0.9375rem;
  margin-right: -0.9375rem; }
  .row::after, .attribute-value-container > div::after {
    content: "";
    display: table;
    clear: both; }

或者您可以使用 Bootstrap 的网格混合，另请参阅 http://v4-alpha.getbootstrap.com/layout/grid/#sass-mixins:

Sass代码：

 .attribute-value-container {
  @include make-container();
  > div { 
    @include make-row();
    @include media-breakpoint-up(sm) { 

      > div {
        @include make-col();
      }

      > div:first-child {
        @include make-col-span(4);
      }

      > div:last-child {
        @include make-col-span(8);
      }
    }
  }
}

以上编译成CSS代码如下：

.attribute-value-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem; }
  .attribute-value-container::after {
    content: "";
    display: table;
    clear: both; }
  .attribute-value-container > div {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem; }
    .attribute-value-container > div::after {
      content: "";
      display: table;
      clear: both; }
    .attribute-value-container > div > div {
      position: relative;
      float: left;
      min-height: 1px;
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; }
    @media (min-width: 544px) {
      .attribute-value-container > div > div:first-child {
        width: 33.33333%; }
      .attribute-value-container > div > div:last-child {
        width: 66.66667%; } }

您可以在与第一个解决方案相同的 HTML 上应用上述 CSS 代码。

像上面那样使用 mixins 也会让你的 CSS 代码变大，但是你可以在没有预定义网格的情况下编译 classes 对于你只为你的网格使用 mixins 的情况：

Sass:

$enable-grid-classes: false;
@import "bootstrap.scss";

Bootstrap: 在父元素上指定列大小

Bootstrap: Specify column size on the parent element

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4