使用面板主体类引导两列错误？答案

【问题标题】：Bootstrap two columns bug with panel-body class?使用面板主体类引导两列错误？
【发布时间】：2015-04-02 04:03:52
【问题描述】：

我创建了 2 列引导布局（一列用于菜单，一列用于内容）。它运作良好，但如果我放置一个引导面板（准确地说是.panel-body），它会做一些奇怪的事情（看看http://i.stack.imgur.com/wGUKs.png）；

HTML：

body {
    padding-top: 50px;
}
.container-body {
    background-color: orange;
    padding: 0px!important;
}
.container-body>.sidebar {
    background-color: yellow;
    padding-top: 20px;
    width:250px;
    float: left;
}
.container-body>.content {
    background-color: lightblue;
    min-height: 100%;
    padding: 20px 15px 0px 15px;
    margin-left: 250px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container container-body">
    <div class="sidebar">
        <ul class="list-unstyled">
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
        </ul>
    </div>
    <div class="content">
        <div class="panel-body">
            <div class="panel panel-info">
                <div class="panel-heading">
                     <h3 class="panel-title">test:</h3>
                </div>
                <div class="panel-body">
                    <p>Why does this box follow sidebar size ?</p>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

bootstrap 为您提供了设计网页的所有功能……您为什么不先尝试使用原始 bootstrap.min.css 然后对其进行自定义。使用固定宽度将迫使其他宽度表现不稳定。此外，它不会很好的响应。使用 % - 说 - '宽度：40%;'
实际上，这个侧边栏是可选的，并且对于小型设备是可见性隐藏的，不幸的是我应该保持 250px 的宽度用于广告目的：/
没人知道这是哪里来的？
我给你我的答案。希望对你有帮助。

标签： css twitter-bootstrap two-columns two-column-layout

【解决方案1】：

决赛：

Bootstrap 是一个最终的更新版本，它提供了非常好的 CSS 来轻松设计一个网页。但是，我们可以根据需要自定义引导值。文件包括：bootstrap.min.css、~min.js 和 sb-admin-2.css。

在您的源代码中，您使用：

<div class="container container-body">

在这里，我使用 wrapper 来处理两个列，如下所示：

<div id="wrapper">
    <div class="navbar-default sidebar">
        <div class="sidebar-nav">
        <ul class="list-unstyled">
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
            <li>AAAA</li>
        </ul>
        </div>
..............

此演示向您展示如何在不编写我们自己的代码的情况下按照您的意愿进行操作：抱歉，我在 JsFiddle 给你演示。

希望这能让您对编写脚本有所了解。

【讨论】：