テーブルセルの幅：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

ブートストラップはfloatプロパティを.input-group .form-controlクラスに適用します。この例では、これは2番目のtable-cellです。

私は最初の2つの例がfloatプロパティを持たず、次の2つの例で行う例を示しました。 floatプロパティは、ドキュメントフローから要素を取り出します。それが含まれている要素を拡張することができる理由です。 最後の例は、floatプロパティがなく、2番目のtable-cellの幅が100％未満に設定されています。 ブートストラップが適用される他のスタイリングの一部から、効果がスニペットに表示されます。

例1： ないフロート 幅100％

例2： ないフロート、 幅200％

例3： 左フロート、 幅100％

例4：012左 フロート、

example5を 幅200％： ないフロート、 幅50％の実施例5で

table-cellは、テーブルの規則に従います。つまり、表のセルの幅が異なる場合でも、表のセルは親コンテナinput groupを100％にします。最後のtable-cellは残りを埋めるでしょう。

注：テーブルセル（input.group）の親コンテナは、例を容易にするために静的な値に設定されています。ブートストラップはその要素に幅を追加しないため、親要素の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>