无法在列中创建另一个框

Question

Bootstrap代码：http://www.bootply.com/rKAlUVLSTA

我正在尝试在左侧边栏下方创建一个框，但无论我做什么，它始终位于白色背景区域。我明白，如果我在其他地方添加 "leftbar" class，它会起作用，但宽度必须与徽标背景保持相同。

截图：

Answer 1

解决方案如下：http://www.bootply.com/rw2brhxWy7 基本上，您必须做的是将两者拆分为父列中的两个单独的列。我加了一个margin-top: 20px 可以区分两者

相关代码如下：

<div class="col-md-2">
  <div class="col-md-12 leftbar" style="margin-top:50px;">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div><!--/.navbar-header -->
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
        <div class="text-center">
          <p>John Doe</p>
          <p>Points</p>
        </div>
          <ul class="nav navbar-nav sidebar-nav">
            <li><a href="#"><span class="glyphicon glyphicon-dashboard"></span> Dashboard</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-flash"></span> Innovation</a></li>
            <li class="active"><a href="#"><span class="glyphicon glyphicon-gift"></span> Redeem</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
    <div class="col-md-12 leftbar" style="margin-top: 20px;">

      I want to free myself from this white box and be in a new box instead.<p></p>

    </div>
  </div>

编辑： 问题是现在该列与绿色导航栏的宽度不匹配 div。您必须记住，bootstrap 的 CSS 将对每一列左右应用 20px 的填充。为了解决这个问题，你应该添加一个自定义 class 来覆盖它。添加以下 class：

.noPadding {
    padding-left: 0;
    padding-right: 0;
}

将此 class 添加到以下 div：

<div class="col-md-2 noPadding">
    <div class="col-md-12 leftbar" style="margin-top:50px;">
    </div>
    <div class="col-md-12 leftbar" style="margin-top: 20px;">
    </div>
  </div>

已编辑解决方案 Bootply： http://www.bootply.com/tLCcdki4uP

无法在列中创建另一个框

Unable to create another box in a column

html

css

twitter-bootstrap

twitter-bootstrap-3