Twitter bootstrap 如何动态调整容器大小以适应<；部门>；

我想根据容器内显示的

面板动态调整容器大小。目前，集装箱内有4个

面板，完全适合整个集装箱。但是当容器内只有2个

面板时，问题就出现了，那么右侧将有大量我不想要的空间。容器应根据其内部的面板调整大小

我已经粘贴了图像当前的外观

当这里有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>

名字
姓

您的容器同时具有

col-md-3

和

col-sm-6

类，因此根据您的容器宽度，它们将占据行的1/4或1/2。一旦容器宽度为您的容器同时具有

col-md-3

和

col-sm-6

类，则包含2个面板的行将根据您的容器宽度进行缩放，因此它们将占据行的1/4或1/2。一旦容器宽度达到此引导值，您的两个面板行将根据您的需要进行缩放？如果是这样，您需要将其添加为标记并删除CSS3标记。@Rob，是的，这是引导。你知道怎么做吗？不，我永远不会使用Bootstrap这是一个太宽泛的问题，最终也会因为同样的原因关闭。在堆栈溢出时，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容，清楚地解释什么不起作用，并在问题中提供一个答案。如果让我告诉你如何编写CSS，这将使它过于宽泛。您最初的问题似乎并没有说，“这段代码应该可以工作，但它不工作，所以它有什么问题？”而是要求我们为您编写它，这又一次使它过于宽泛。这是自举吗？如果是这样，您需要将其添加为标记并删除CSS3标记。@Rob，是的，这是引导。你知道怎么做吗？不，我永远不会使用Bootstrap这是一个太宽泛的问题，最终也会因为同样的原因关闭。在堆栈溢出时，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容，清楚地解释什么不起作用，并在问题中提供一个答案。如果让我告诉你如何编写CSS，这将使它过于宽泛。您最初的问题似乎并没有说，“这段代码应该可以工作，但它不工作，所以它有什么问题？”而是要求我们为您编写它，这同样使它过于宽泛。感谢您抽出时间。正如我在问题中提到的。我想根据容器内部的

调整容器的大小。如果有1个

，那么它在容器内看起来就不好看了。我有很多数据要显示在单

中。因此，如果我可以减少容器的大小，那就太好了。请帮帮我。我理解，但这种情况与引导中容器的性质相矛盾。如果使用容器流体，则容器具有固定宽度或全宽度，因此基于活动选项卡和内部div数更改容器宽度对于引导来说有点奇怪，因此我建议改为读取Flexbox属性。@user8827003，如果你觉得这个问题对本网站的其他读者有用，那么请你投票表决。非常感谢。谢谢你抽出时间。正如我在问题中提到的。我想根据容器内部的

调整容器的大小。如果有1个

，那么它在容器内看起来就不好看了。我有很多数据要显示在单

中。因此，如果我可以减少容器的大小，那就太好了。请帮帮我。我理解，但这种情况与引导中容器的性质相矛盾。如果使用容器流体，则容器具有固定宽度或全宽度，因此基于活动选项卡和内部div数更改容器宽度对于引导来说有点奇怪，因此我建议改为读取Flexbox属性。@user8827003，如果你觉得这个问题对本网站的其他读者有用，那么请你投票表决。非常感谢。

<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>

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

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