如何在HTML5中自动调整选项卡宽度

Question

我想根据<div>自动调整容器大小。如果容器内有4 <div>，那么它看起来很好但如果只有1 <div>那么右侧会有足够的空间。因此，希望根据<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

尝试使用css flexbox来摆脱不需要的空间。

.nav {
  display:flex;
}
a {
  text-decoration: none;
  color:white;
}
li {
  background-color:#232323;
  list-style-type: none;
  padding: 20px;
  flex: 1 1 auto;
}
li.active{
  background-color:gray;
}

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

弹性：l 1自动在li上使li填满主弯曲轴上的任何剩余空间（水平线，因为默认的弯曲方向是行）

您可以阅读弹性框： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/almanac/properties/f/flex/

Answer 2

您可以将flexbox用于此行为。查看此codepen以获取演示。

<强> HTML：

<div class="parent">
  <ul class="nav">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

<强> CSS：

.parent {
  background-color: orange;
}

.parent ul.nav {
  list-style: none;
  padding: 0px;
  margin: auto;
  display: flex;
}

.parent ul.nav li {
  background-color: grey;
  padding: 10px 15px;
  border-right: 1px solid black;
  width: 100%;
  text-align: center;
}

.parent ul.nav li:last-child {
  border: 0px;
}

希望这会有所帮助！

编辑1：

检查另一个codepen进行演示。

body {
  padding: 0px;
  margin: 0;
}

.parent {
  background-color: orange;
  padding: 20px;
}

.parent .tabFrame .itemContainer {
  display: inline-block;
  margin-bottom: 50px;
  padding: 5px;
  border: 1px solid;
  overflow: hidden;
}

.parent .tabFrame .myItem {
  background-color: grey;
  display: inline-block;
  width: 100px; /* can be any fixed width */
  padding: 10px;
  color: white;
  border: 1px solid black;
}

<div class="parent">
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
      <div class="myItem">Item 3</div>
      <div class="myItem">Item 4</div>
    </div>    
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
      <div class="myItem">Item 3</div>
    </div>
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
    </div>
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
    </div>
  </div>
</div>

编辑：2
请参阅此codepen

.myTab {
  border: 1px solid #dddddd;
  display: inline-block;
  margin-top: -1px;
}

.myTab .tab-pane .myPanel {
  display: inline-block;
  margin: 10px;
}

.myPanel {
  min-width: 200px;
}

#ATab {
  border-bottom: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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 clearfix myTab">
        <br>
        <div id="Select" class=" tab-pane fade in active clearfix">
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
        </div>
        <div id="Criteria" class="tab-pane fade">
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
          
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>