寬度：表格單元格上的100％如何工作？

Question

我在讀How are `display: table-cell` widths calculated?和引導程序input groups。考慮下面的例子

https://jsfiddle.net/kb23jLL3/

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

的.form-control具有寬度100％，但只生長採取在congaing表的可用寬度。到現在爲止還挺好。所以我期望.form-control永遠不會超越含表的限制。但是，如果我給寬度超過100％，那麼它會從包含表格的邊界增長，如果我給寬度小於100％，那麼它不佔用可用空間。例如。 100％+案例：

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

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

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

你可以看到水平滾動條出現現在。同樣考慮下面的例子中，我給寬度小於100％：

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

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

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

爲什麼對錶單元格寬度爲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將填補其餘部分。

note：將表格單元格（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>