twitter-bootstrap - 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>

...可能在divs 上有一些应该接收样式的类。

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

我假设这不是 Bootstrap 核心 CSS 的一部分。是否有可用的第 3 方 CSS 附加库？是否已为将来的 Bootstrap 版本提出了建议（我刚刚自己将其添加到问题跟踪器中）？指向相关库/文档/讨论的指针表示赞赏。

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

score 1 · Accepted Answer

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

在我当前的模板上，我有 11 个属性值对，所以如果我可以在父元素或模板元素上指定它，我将保存 20 个 ((11-1)*2) 类。这将提高简洁性（并且，在我看来，易读性）并减少出错的空间。

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

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

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

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

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

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

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

对于您的情况，您可以使用 Sass@extend或 Bootstrap 的网格混合。

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

萨斯代码：

.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类的 HTML：

<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 代码中添加选择器。

为 s 编译的 CSS 代码.row将如下所示：

.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：

萨斯代码：

 .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";

score 0 · Accepted Answer

这不是 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;
}

结果：

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

2 回答 2

Related

Reference