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的一部分。是否有第三方CSS附加库可用？它是否已被提议用于未来的Bootstrap版本（我现在自己将其添加到issue tracker）？我们赞赏相关图书馆/文件/讨论的指示。

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

Answer 1

Bootstrap适用于预定义的类，您应该按预期使用这些类。

在我当前的模板上，我有11个属性 - 值对，所以我愿意保存20（（11-1）* 2）类，如果我可以在父母或模板元素。这样可以改善简洁程度（在我看来，易读性并减少错误的余地。

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

要使用我们的Gruntfile并在本地运行我们的文档，您需要一份Bootstrap的源文件，Node和Grunt。按照这些步骤，您应该准备摇滚：


下载并安装Node，我们用它来管理我们的依赖项。

使用npm install -g grunt-cli安装Grunt命令行工具grunt-cli。

导航到root / bootstrap目录并运行npm install以安装package.json中列出的本地依赖项。

安装Ruby，使用gem install bundler安装Bundler，最后运行bundle install。这将安装所有Ruby依赖项，例如Jekyll和plugins。

完成后，您将能够运行命令行提供的各种Grunt命令。

根据您的情况，您可以使用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;
    }
  }
}

现在，您只能使用1 attribute-value-container类：

<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变得更大。 Extending在编译的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代码更大，但是你可以在没有预定义网格类的情况下进行编译，以适应你的网格只使用mixin的情况：

萨斯：

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

Answer 2

这不是真正由bootstrap实现的东西，因为它可以达到N列。指定每一行，因为每一行可能不同。如果你想要这个脚手架以外的东西，很容易使用一些CSS和n-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;
}

结果：

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

2 个答案: