twitter-bootstrap - 为什么 col-auto 中多列嵌套行的大小大于内容宽度？

Question

如果我理解正确的话，Bootstrap 中的 col-auto 类应该只使用内容的自然宽度。当我在下面的代码中使用 col-lg-auto 时，宽度变得比内容大。

我创建了这个 Codepen这说明了这个问题。

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
    </div>
  </div>
  <!-- Replace col-lg-auto with col-lg and add class flex-grow-0 -->
  <div class="col-12 col-lg-auto">
    <div class="row">
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
    </div>
  </div>
</div>

如果 col-lg-auto 中的 row 只有一个子列，那么它会按预期工作。如果我将类 col-lg-auto 替换为类 col-lg 和 flex-grow-0，我也能够实现我想要的布局。

有人能解释一下为什么在这种情况下 col-lg-auto 的宽度会变得比内容宽度大吗？我不能在具有 col-auto 类的列中使用包含多列的行吗？

Answer 1

我不认为这是一个“错误”。 col-lg-auto 中的列是全宽 col-lg-12 因此它们按预期填充 100% 宽度。如果您希望内部列占用最小宽度，请在内部行上使用 flex-lg-column (flex-direction:column)...

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
            </div>
        </div>
        <!-- Replace col-lg-auto with col-lg and add class flex-grow-0 -->
        <div class="col-12 col-lg-auto">
            <div class="row flex-lg-column">
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
            </div>
        </div>
    </div>
</div>

演示:https://www.codeply.com/go/l5kv3hu9Av

注意:对于 IE 11，您需要添加:

/* IE 11 helper */
.flex-lg-column > .col-lg-12 {
    flex: 1 1 auto;
}