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>

如果row中的col-lg-auto仅具有一个子列，则它可以按预期工作。如果我将类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;
}

Answer 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模式”下，其宽度auto与内容宽度无关-difference between width auto and width 100 percent

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

2 个答案: