为什么col-auto中包含多列的嵌套行的大小超过内容宽度？

Question

如果我理解正确,col-autoBootstrap中的类应该只使用内容的自然宽度.当我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;
}