使用引导程序将屏幕划分为垂直部分

Question

我正在创建一个html视图，我想将屏幕分为两个垂直部分。一个将是垂直菜单，其余将是显示某些产品的空间。到目前为止，这是mi的观点：

<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。预先感谢。