使用引导带4，包含“描述列表”的卡片的宽度随着列表项的增加而增加。

Question

我正试着用一张单张卡划一排，每张牌的宽度都是必要的，但不能更宽。这似乎是一个弹性容器的工作，我几乎可以看到它的工作。

但是，对于我添加到列表中的每个元素，卡片的宽度都会增加，并显示在下面和片段中。

是否有办法使卡片变宽取决于文本的宽度(没有这种奇怪的副作用)？

​

​

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h1>Other content</h1>
    <div class="col-12 bg-danger p-1">
      <div class="d-flex flex-row">
        <div class="p-2 bg-info">
          <div class="card border-left-primary">
            <div class="card-header">
              <h6 class="m-0 font-weight-bold text-primary">My Card</h6>
            </div>
            <div class="card-body">
              <dl class="row">
                <dt class="col-3">Key</dt>
                <dd class="col-9">Value</dd>
                <dt class="col-3">Key</dt>
                <dd class="col-9">Value</dd>
                <!-- Add more items to see the effect  -->
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Here we show the effect -->
    <div class="col-12 bg-danger p-1">
      <div class="d-flex flex-row">
        <div class="p-2 bg-info">
          <div class="card border-left-primary">
            <div class="card-header">
              <h6 class="m-0 font-weight-bold text-primary">My Card</h6>
            </div>
            <div class="card-body">
              <dl class="row">
                <dt class="col-3">Key</dt>
                <dd class="col-9">Value</dd>
                <dt class="col-3">Key</dt>
                <dd class="col-9">Value</dd>
                <dt class="col-3">Key</dt>
                <dd class="col-9">Value</dd>
                <!-- Add more items to see the effect  -->
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>

​

Answer 1

我的假设

我的猜测是，柔性盒父母的宽度(卡体内的.row )是由他们的孩子计算的first，就好像父母没有包装，并试图尽可能地挤压它的孩子一样：

​

​

然后根据他们的父母计算孩子的宽度百分比。

但我也无法证明这一点。

​

“修正”

修复将不是仅仅依赖于行的包装。相反，如果一个键值对应该位于它们自己的行上，那么使用Bootstrap的行和列作为结构显式地定义它们：

<div class="row">
    <div class="col-auto">
        <strong>Key</strong>
    </div>
    <div class="col-auto">Value</div>
</div>
<div class="row">
    <div class="col-auto">
        <strong>Key</strong>
    </div>
    <div class="col-auto">Value</div>
    <!-- Add more items to see the effect  -->
</div>

可以使用.col-auto将列宽度设置为“自动”，以避免对键和值进行包装。如果您想要在键上固定宽度，请设置它们的宽度。

​

​

演示： https://jsfiddle.net/davidliang2008/nt6ov5fy/28/

​

注意:您似乎错过了.rows上的<div class="col-12 bg-danger p-1">。我已经在我的演示中添加了它们。

Answer 2

你可以简单地处理这个问题。

<div class="col-12 bg-danger p-1">
  <div class="d-flex flex-row">
    <div class="p-2 bg-info">
      <div class="card border-left-primary">
        <div class="card-header">
          <h6 class="m-0 font-weight-bold text-primary">My Card</h6>
        </div>
        <div class="card-body" style="max-width: 250px !important; overflow-x: auto;">
          <dl class="row">
            <dt class="col-3">Key</dt>
            <dd class="col-9">Value</dd>
            <dt class="col-3">Key</dt>
            <dd class="col-9">Value</dd>
            <dt class="col-3">Key</dt>
            <dd class="col-9">Value</dd>
            <!-- Add more items to see the effect  -->
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>

一旦完成，这将不会让div扩展。