Question

我正在阅读How are `display: table-cell` widths calculated?并引导input groups。请考虑以下示例

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
  <div class="input-group">
    <div class="input-group-addon" id="basic-addon1">@</div>
    <div class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
  </div>  
</form>

＆＃13;

.form-control的宽度为100％，但它只会增加以获取congaing表中的可用宽度。到现在为止还挺好。所以我希望.form-control永远不会超出包含表的限制。但是如果我给出超过100％的宽度，那么它会从包含表格的边界中生长出来，如果我给出的宽度小于100％，那么它就不会占用可用空间。例如。 100％+案例：

https://jsfiddle.net/kb23jLL3/1/

＆＃13;

.input-group .form-control {
  width: 110%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
  <div class="input-group">
    <div class="input-group-addon" id="basic-addon1">@</div>
    <div class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
  </div>  
</form>

＆＃13;

您可以看到现在出现水平滚动条。同样，请考虑以下示例，其中宽度小于100％：

https://jsfiddle.net/kb23jLL3/2/

＆＃13;

.input-group .form-control {
  width: 90%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
  <div class="input-group">
    <div class="input-group-addon" id="basic-addon1">@</div>
    <div class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
  </div>  
</form>

＆＃13;

为什么表格单元格的100％宽度意味着可用的宽度？ 100％宽度是否意味着要占用100％的含元素？请提供一些提及此行为的参考。

Answer 1

Bootstrap将float属性应用于.input-group .form-control类。这是示例中的第二个table-cell。

我举了一个例子，前两个例子没有float属性，接下来的两个例子没有。 float属性从文档流中获取一个元素。这就是它能够扩展包含元素的原因。最后一个示例没有float属性，并且第二个表格单元格的宽度设置为小于100％。部分来自引导程序应用的其他样式，可以在代码段中看到效果。

<强>例1：没有浮动宽度100％

<强>例2：没有浮动，宽度200％

<强>示例3：向左飘浮，宽度100％

<强>范例4：向左飘浮，宽度200％

<强>举例5：没有浮动，宽度50％

在示例5中，table-cell遵循表的规则。这意味着表格单元格将父容器input group填充为100％，即使表格单元格的宽度设置不同也是如此。最后一个table-cell将填补其余部分。

注意：表格单元格的父容器（input.group）设置为静态值以方便示例。 Bootstrap不会向该元素添加宽度，这会使其呈现为其父元素的100％。

* {
  box-sizing: border-box;
}
.input-group {
  border-collapse: separate;
  display: table;
  position: relative;
  background: #ccc;
  padding: 5px;
  margin-bottom: 20px;
  /* relative elements render to 100% width when width is not set explicity. For the example the width is limited to 80%. */
  width: 80%;
}
.addon {
  position: relative;
  display: table-cell;
  background: #559;
  padding: 5px 6px;
  white-space: nowrap;
  width: 1%;
}
.cell1 {
  position: relative;
  display: table-cell;
  background: #595;
  padding: 5px;
  width: 100%;
  /* float: left;*/
}
.cell2 {
  position: relative;
  display: table-cell;
  background: #595;
  padding: 5px;
  width: 200%;
  /* float: left;*/
}
.cell3 {
  position: relative;
  display: table-cell;
  background: #955;
  padding: 5px;
  width: 100%;
  float: left;
}
.cell4 {
  position: relative;
  display: table-cell;
  background: #955;
  padding: 5px;
  width: 200%;
  float: left;
}
.cell5 {
  position: relative;
  display: table-cell;
  background: #995;
  padding: 5px;
  width: 50%;
  /* float: left;*/
}
.cell6 {
  position: relative;
  display: table-cell;
  background: #995;
  padding: 5px;
  width: 50%;
  float: left;
}

<!-- example 1 | no float cell 100% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell1'>no float, width 100%</div>
</div>

<!-- example 2 | no float cell 200% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell2'>no float, width 200%</div>
</div>


<!-- example 3 | float cell 100% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell3'>float left, width 100%</div>
</div>

<!-- example 4 | float cell 200% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell4'>float left, width 200%</div>
</div>

<!-- example 5 |  cell 50% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell5'>no float, width 50% (fills remainder 'table' width)</div>
</div>

<!-- example 6 |  cell 50% -->
<div class='input-group'>
  <div class='addon'>@</div>
  <div class='cell6'>float left, width 50% (sizes to 50% of available space)</div>
</div>

宽度：表格单元格的工作量是多少？

1 个答案: