bootstrap面板重叠浮动

Question

我有一个漂浮在左侧的简单侧面板和一个主要容器，它是一个自举＆＃34;面板＆＃34;。自举面板的边框重叠在我的侧面板中。

http://fiddlesalad.com/jade/bootstrap-panel-float/

＆＃13;

＆＃13;

aside { width: 100px; float: left; }

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<aside>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</aside>
<div class="panel panel-default panel-group container-fluid">
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何将它们分开以便它们不重叠？

Answer 1

您必须编写自己的css以提供元素宽度和显示设置，或者您学习网格系统。

在使用框架之前学习基本的CSS和HTML，它将节省很多痛苦。

网格是100/12 =每行是12列。 xs类来自0 - 向上视口大小。您可以将其更改为col-sm-X，它将从768px及以上。 Getbootstrap.com以及许多其他关于如何使用Bootstrap 3网格的资源。

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <aside class="col-xs-3">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</aside>

    <div class="col-xs-9">
      <div class="panel panel-default panel-group">
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

那是因为旁边的宽度设置为100px。放一个合适的宽度：

aside {
   width: 100%;
}

.panel-default {
   clear: both;
}