Я создаю HTML-представление и хочу разделить экран на две вертикальные секции. Одним из них будет вертикальное меню, а остальные - место для демонстрации некоторых продуктов. Это мой взгляд пока:
<nav class="navbar navbar-light bg-light" style="background-color:#c43c00;width:100%;height:60px;margin-bottom:0;border-radius:0 !important;">
<div class="col-md-3" align="left">
<h2><strong>Icon site</strong></h2>
</div>
<div class="col-md-8" style="padding-top:12px;" align="center">
<input type="text" class="form-control" placeholder="Make a search"/>
</div>
<div class="col-md-1" align="center" style="position:static;">
<h3><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></h3>
</div>
</nav>
<div class="row" style="width:100%;height:100%;margin-bottom:0;padding-left:0;border:0;">
<div class="col-lg-2" style="height:100%;position:fixed;padding-left:0%;padding-right:0%;">
<nav class="navbar navbar-light bg-light" style="background-color:#ff6d00;width:100%;height:100%;margin:0;border-radius:0 !important;">
<div class="col-lg-12">
<h4><strong>Our categories</strong></h4>
</div>
<br><br><br>
<div class="col-lg-12" style="padding-left:0;padding-right:0;">
<a style="padding-left:10px;">Pets <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
<ul class="list">
<li>
<a>Dogs</a>
<ul>
<li><a>Pugs</a></li>
<li><a>Chihuahua</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-lg-10" style="height:100%;padding-left:0%;padding-right:0%;">
<h3 style="color:black">Choose a category to begin</h3>
</div>
</div>
Как видите, сначала у меня есть заголовок сайта, а затем я пытаюсь разделить страницу. Первый раздел col-lg-2 это нормально. Моя проблема возникает с остальной частью строки: col-lg-8, потому что тег h3 выглядит выровненным по левому краю над текстом col-lg-2.
Кто-то может мне помочь? мне нужно хранить данные внутри разделенного пространства в div col-lg-8.
Я использую Bootstrap 3.3. Заранее спасибо.