Question

我目前正在使用bootsrap和一个简单的聊天布局。在大多数情况下，我能够根据自己的需要对其进行修改。唯一的问题是布局不适应窗口大小（100％高度/宽度）。我想利用整个页面。所有元素都位于名为container的div中。我怎么能让它适应页面（100％高度/宽度）？ CODEPEN

.conversation-wrap
{
    box-shadow: -2px 0 3px #ddd;
    padding:0;
    max-height: 400px;
    overflow: auto;
}
.conversation
{
    padding:5px;
    border-bottom:1px solid #ddd;
    margin:0;

}

.message-wrap
{
    box-shadow: 0 0 3px #ddd;
    padding:0;

}
.msg
{
    padding:5px;
    /*border-bottom:1px solid #ddd;*/
    margin:0;
}
.msg-wrap
{
    padding:10px;
    max-height: 400px;
    overflow: auto;

}

Answer 1

将col-lg-12添加到容器中

<div class="container col-lg-12">
...
</div>

http://codepen.io/anon/pen/ucrog

编辑：同时更改

<div class="message-wrap col-lg-8">

到

<div class="message-wrap col-lg-9">

Bootstrap.css使布局100％宽度/高度

1 个答案: