为啥在 col-auto 内具有多列的嵌套行的大小大于内容宽度？

Posted 2023-03-06

【中文标题】为啥在 col-auto 内具有多列的嵌套行的大小大于内容宽度？

【英文标题】：Why is the size of a nested row with multiple columns inside col-auto more than content width?为什么在 col-auto 内具有多列的嵌套行的大小大于内容宽度？

【发布时间】：2019-03-08 14:20:56

【问题描述】：

如果我理解正确的话，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 和flex-grow-0 替换类col-lg-auto，我也能够实现我想要的布局。

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

【参考方案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;

【参考方案2】：

研究这些问题的一般方法是转到 bootstrap.css 并检查定义：

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L82-L92

.col-lg-auto 
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L652-L657

@media (min-width: 992px) 
    .col-lg-auto 
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    

这意味着在“lg-mode”中它的宽度 auto 与内容宽度无关 - difference between width auto and width 100 percent

【讨论】：

你说它与内容宽度无关，但docs 说“使用col-breakpoint-auto 类根据其内容的自然宽度调整列的大小。”

我试着告诉你：不要犹豫去寻找来源。