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。一旦容器宽度<750px，您的具有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

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

1 个答案: