包装器div .col没有高度?

时间:2017-03-23 16:49:05

标签: html css twitter-bootstrap css3 twitter-bootstrap-3

我都使用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全高?

3 个答案:

答案 0 :(得分:4)

.Module没有任何高度,因为.col-类在Bootstrap 3中浮动。当项目浮动时,它将从正常文档流中取出并且不占用空间。如果.col-不占用空间,则.Module没有高度。 .row具有高度,因为它具有内置clearfix,可清除.col-的浮点数。

要解决此问题,您可以将overflow: hidden;添加到.Module以清除浮动或使用clearfix

您可能还需要考虑将.Module移至.row元素,具体取决于您应用的样式,即background-color

Uncleared Floats

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

Cleared Floats

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

答案 1 :(得分:1)

在关闭clear:both div之前使用.module

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

答案 2 :(得分:1)

如果目标是“给予.Module全高”,则.Module的任何容器也必须是全高。

body, html {
    height: 100%;
}

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

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

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