Bootstrap嵌套列网格无法响应

时间:2016-04-21 12:40:56

标签: jquery html css twitter-bootstrap

我正在尝试在boostrap中实现此网格系统,但我未能实现它。这就是我想要实现的目标

enter image description here

但是div像这样重叠

enter image description here

这是我的代码。

<div class="container">
    <div class="row">
    <div id="wrapper">
            <div class="col-md-12 colHeight topSpace">
        <div class="row">
            <div class="col-md-3 text-center">

            </div>
                <div class="col-md-6 text-center">
            <div class="posRel">

                <p class="col-centered">
                        <Button class="button-0 red" onClick="hintWord()">Hint</Button>
                        </p>
            </div>
    </div>

                <div class="col-md-3 text-center">

                <div class="imageArea">
            <div class="imageError">It is Working<img src="images/new.png"></div>
            <div class="imageSuccess"><img src="images/test.png"></div>
            </div>
        </div>
        </div>

        </div>
                    </div>  

        </div>
        </div>

我给包装器提供了1300px的高度,因此页脚不会与我的内容重叠。

一切都在全屏模式下工作。当我检查响应模式时,div彼此重叠。

这是我的css

#wrapper{
height:1300px;
}

.col-centered{

margin: 0 auto

}

1 个答案:

答案 0 :(得分:-1)

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 text-center">

            </div>
            <div class="col-md-6 text-center">
                <div class="posRel">

                    <p class="col-centered">
                        <Button class="button-0 red" onClick="hintWord()">Hint</Button>
                    </p>
                </div>
            </div>
            <div class="col-md-3 text-center">
                <div class="imageArea">
                    <div class="imageError">It is Working<img src="images/new.png"></div>
                    <div class="imageSuccess"><img src="images/test.png"></div>
                </div>
            </div>
        </div>
    </div>
</body>