Question

我遗漏了一些非常简单的东西。我遇到这种情况的原因要复杂得多，但我简化了它。考虑以下带有引导类的简单模板：

<div class="wrapper">
  <div class="row">
    <div class="col-6">
      <div class="text">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Quo quia fugiat labore atque. Voluptate accusamus quod qui voluptatem nisi nulla.</div>
    </div>
    <div class="col-6"></div>
  </div>
</div>

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100vw;
  background: #333;
}

.wrapper {
  padding: 20px;
  background: #fff;
}

.text {
  width: 250px;
  background: #000;
  color: #fff;
}

[class^='col'] {
  border: 3px solid red;
}

Codepen

为什么带有文本的 .col-6 不会按照 css 规则的要求增长到至少 250px 的宽度？

如何拉伸？

更新:: 总结一下：只是长文本放大 .text 元素，分别放大 .col-6 。和显式宽度：250px 放大 .text 元素但不会放大 .col-6。在“250px 宽度情况”中，它会被 col-6 上的 max-width: 50% 属性截断。但是为什么oO

Answer 1

如果问题类似于下面的代码片段，那么它工作正常。
.col-6 已声明 width: 50%; flex: 0 0 auto;。重要的部分是 0 0 属性中的 flex:。它所做的只是防止元素增长（第一个 0）和缩小（第二个 0），因此它会保持 50% 宽度不会不考虑其内容。 Here 您可以更深入地检查它的作用。

附注
我假设您正在使用引导程序 5
在引导程序 4 中，.col-6 具有 max-width: 50%;flex: 0 0 50%，它的工作方式类似并且会产生相同的行为

.wrapper {
  padding: 20px;
  background: #fff;
  max-width: 300px;
}

.text {
  width: 250px;
  background: #000;
  color: #fff;
}

[class^='col'] {
  border: 3px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<div class="wrapper">
  <div class="row">
    <div class="col-6">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quo quia fugiat labore atque. Voluptate accusamus quod qui voluptatem nisi nulla.
      </div>
    </div>
    <div class="col-6"></div>
  </div>
</div>

Answer 2

此行为基于循环宽度计算。我已经将这个案例描述为更简单的例子。更多在这里： Why inner flex width is overflowing?

为什么 bootstrap col 内容不会增加宽度？

2 个答案: