Код начальной загрузки: http://www.bootply.com/rKAlUVLSTA
Я пытаюсь создать поле под левой боковой панелью, но что бы я ни делал, он всегда находится в зоне белого фона. Я понимаю, что если я добавлю класс «leftbar» в другое место, он будет работать, но ширина должна оставаться такой же, как фон логотипа.
Снимок экрана:
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 панели навигации. Вы должны помнить, что CSS начальной загрузки применяет отступы в 20 пикселей слева и справа к каждому столбцу. Чтобы исправить это, вы должны добавить настраиваемый класс, чтобы переопределить это. Добавьте следующий класс:
.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