Почему размер вложенной строки с несколькими столбцами внутри col-auto больше ширины содержимого?

Question

Если я правильно понимаю, классы col-auto в Bootstrap должны использовать только естественную ширину содержимого.Когда я использую 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

Общий способ исследования этих вопросов - перейти на 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, которая не связана с шириной содержимого - разница между шириной auto и шириной 100 процентов

Answer 2

Я не думаю, что это "ошибка".Столбцы внутри 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;
}