如何动态调整容器大小以适应 <div>

Question

我想根据其中显示的<div> 面板动态调整容器的大小。目前，容器内有 4 个<div> 面板，非常适合整个容器。但是当容器内只有 2 个<div> 面板时就会出现问题，那么右侧会有很多我不想要的空间。容器应根据其中的面板调整大小。

我已经粘贴了图像当前的样子。

当这里有 4 个面板时：

当有 2 个面板时

所以你可以看到右侧有足够的空间。我想自动调整容器的大小以适应。

<div class="container">
    <div class="row">
        <div>
            <ul class="nav nav-tabs" id="ATab">
                <li class="active"><a data-toggle="tab" href="#Select">Select</a></li>
                <li><a data-toggle="tab" href="#Criteria">Criteria</a></li>
            </ul>
            <div class="tab-content">
                <div id="Select" class=" tab-pane fade in active"></div>
                <div id="Criteria" class="tab-pane fade"></div>

                      <div class="container active col-md-3 col-sm-6 ">
                        <div class="panel panel-default">
                            <div class="panel-heading">First Name</div>
                        </div>
                    </div>

                    <div class="container active col-md-3 col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">Last Name</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

Answer 1

您的容器同时具有 col-md-3 和 col-sm-6 类，因此根据您的容器宽度，它们将占据行的 1/4 或 1/2。一旦容器宽度小于 750 像素，您的带有 2 个面板的行将根据需要缩放，因为 col-sm-6 类将处于活动状态。 http://bootstrapdocs.com/v3.0.3/docs/css/#grid

这是 Bootstrap 3 的一个限制，在 Bootstrap 4 中进行了更新，您可以简单地用 col 类标记它们，它会自动适应容器宽度。 https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

如果您不想/不能实现 Bootstrap 4，那么您可以通过删除面板包装器中的 Bootstrap 类并使用 Flexbox CSS3 属性创建自己的类来执行混合方法。例如：

<div class="flex-container">
  <div class="flex-item">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>
</div>

然后在你的 CSS 中：

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

.flex-item {
  flex: 1;
  margin: 0px 10px 0px 10px;
}

这种方法的缺点是您必须集成媒体查询来处理容器宽度变化时发生的情况等。但希望这会有所帮助。

最后一个选项（我认为这是最不理想的）是一个 JS 解决方案，其中 col-xx-3 和 col-xx-6 类根据它们中的两个或四个在面板包装器上进行切换，但我真的不推荐那个。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background