Bootstrap中的边框和网格

Question

嗨，我是bootstrap的新手，只是想了解网格线是如何工作的，并在其上制作盒子。我不知道为什么风格没有生效。 这是我的代码：

<div id="content" class="container">
    <div class="row">
     <div class="col-md-12 main ">
        <h2>Welcome to Dashboard!</h2>
      </div>

     <div class="col-md-4 sidebar style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
        <h2>Sidebar</h2>
      </div>
    </div>
</div>

Answer 1

您的HTML无效，您应该关闭类属性引用，并添加缺少的</div>标记。毕竟，您还要确保列的总和恰好是每行12个。这样的事情可能是：

<div id="content" class="container">
    <div class="row">
        <div class="col-xs-4 sidebar">
            <h2>Sidebar</h2>
        </div>
        <div class="col-xs-8 main ">
            <h2>Welcome to Dashboard!</h2>
        </div>
    </div>
</div>

演示1：http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview

此处col-xs-4 + col-xs-8填充了12列。 col-xs-样式从超小尺寸和更高尺寸开始有效。你当然可以让它变得更复杂，例如你希望侧边栏可以整行推送xs设备下面的主要内容：

<div class="row">
    <div class="col-xs-12 col-sm-4 sidebar">
        <h2>Sidebar</h2>
    </div>
    <div class="col-xs-12 col-sm-8 main">
        <h2>Welcome to Dashboard!</h2>
    </div>
</div>

演示2：http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview