Невозможно создать еще одну коробку в колонке

Question

Bootstrap Код: http://www.bootply.com/rKAlUVLSTA

Я пытаюсь создать форму ниже левой боковой панели, но все, что я делаю, это всегда в белом фоне зоны. Я понимаю, что если я добавлю класс «leftbar» в другом месте, он будет работать, но ширина должна оставаться такой же, как и фон логотипа.

Скриншот:

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> 

Edit: Проблема заключалась в том, что теперь столбец не соответствует ширине зеленого NavBar дел. Вы должны помнить, что 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