Question

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

我试图在左侧边栏下面创建一个框但是无论我做什么，它总是在白色背景区。我明白如果我添加＆＃34;左栏＆＃34;在其他地方上课，它会起作用，但宽度必须与徽标背景保持一致。

屏幕截图：

Box

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左右的填充。每列的权利。为了解决这个问题，你应该添加一个自定义类来覆盖它。添加以下类：

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

将此类添加到以下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

无法在列中创建另一个框

1 个答案: