包裝div周圍.col沒有高度？

Question

我都在使用Bootstrap 3並嘗試將我的樣式模塊化，例如：（空的<span>s由React生成，不知道如何擺脫它們……）

html

<div class="row">
    <span></span>
    <div class="Module">
        <span></span>
        <div class="col-xs-3">
            <span></span>
            <div class="thumbnail-wrapper">
                <span><img alt="My something" class="img-thumbnail" src="/static/media/avatar.96308863.png"></span>
                <div class="img-thumbnail-close-btn hidden">
                    <span><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x white-background"></i><i class="fa fa-circle-thin fa-stack-2x black-border"></i><i class="fa fa-times fa-stack-1x"></i></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

Module沒有高度，但col-xs-*和row都有。

• 為什么？
• 怎樣給Module全高？

Answer 1

.Module沒有任何高度，因為.col-類是在Bootstrap 3中浮動的。當某個項目浮動時，它會從普通文檔流中取出，並且不會占用空間。 如果.col-不占用空間，則.Module沒有高度。 .row具有高度，因為它有一個內置的clearfix掃清的彩車.col- 。

為了解決這個問題，您可以添加overflow: hidden; 到.Module清除浮點數或使用clearfix 。

您可能還需要考慮將.Module移至.row元素，具體取決於您應用的樣式，即background-color 。

未清除的浮動

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); .Module { background-color: gold; } 

 <div class="row"> <div class="Module"> <div class="col-xs-6"> Some content here </div> <div class="col-xs-6"> Some content here </div> </div> </div> 

清除浮動

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); .Module { background-color: gold; overflow: hidden; } 

 <div class="row"> <div class="Module"> <div class="col-xs-6"> Some content here </div> <div class="col-xs-6"> Some content here </div> </div> </div> 

Answer 2

只需使用clear:both在關閉.module div之前，

<div class="row">
    <div class="Module">
        <div class="col-xs-6">Some content here</div>

        <div class="col-xs-6">Some content here</div>
        <div style="clear:both"></div>
       </div>
</div>

Answer 3

如果目標是“給.Module全高”，則任何.Module容器.Module必須全高。

body, html {
    height: 100%;
}

.container, .row {
    height: 100%;
}

.Module {
    background: gold;
    min-height: 100%;
}

http://www.codeply.com/go/k72NcpVATe