合并面板内的导航栏？

Question

我的应用程序中有一个屏幕，该屏幕应在面板内部合并navbar。该面板中有两个部分。第一部分是记录的搜索过程，第二部分是将显示信息的部分。我不确定在面板内部组合navbar在Bootstrap 3中是否有效。这是示例：

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">
        <form name="frmFind" id="frmFind">  
            <div class="row">
                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <select class="form-control" name="frm_filterby" id="frm_filterby" required>
                        <option value="">--Search By--</option>
                        <option value="1">Username</option>
                        <option value="2">Email</option>
                        <option value="3">Name</option>
                    </select>
                </div>
                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <input type="text" class="form-control" name="frm_search" id="frm_search" placeholder="Select Search Criteria" disabled>
                </div>
            </div>
            <div class="row">    
                <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <button type="submit" class="btn btn-block btn-primary">
                        <span class="glyphicon glyphicon-search"></span> Search
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="alert message-submit"></div>
                </div>
            </div> 
        </form>
    </div>
</div>
<ul id="main-navbar" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#section1">Section 1</a></li>
    <li><a data-toggle="tab" href="#section2">Section 2</a></li>
    <li><a data-toggle="tab" href="#section3">Section 3</a></li>
    <li><a data-toggle="tab" href="#section4">Section 4</a></li>
    <li><a data-toggle="tab" href="#section5">Section 5</a></li>
    <li><a data-toggle="tab" href="#section6">Section 6</a></li>
</ul>
<div class="tab-content">
	<div id="section1" class="tab-pane fade in active tab-box">
        Section 1
	</div>
	<div id="section2" class="tab-pane fade tab-box">
        Section 2
	</div>
	<div id="section3" class="tab-pane fade tab-box">
        Section 3
	</div>
	<div id="section4" class="tab-pane fade tab-box">
        Section 4
	</div>
	<div id="section5" class="tab-pane fade tab-box">
        Section 5
	</div>
	<div id="section6" class="tab-pane fade tab-box">
		    Section 6
	</div>
</div>

是否有一种在面板内部组合导航栏的好方法，因此内容周围只有一个边框？导航栏选项也应位于该面板Section 1 Section 2 Section 3 ...内，如果您有任何好的示例或建议，请告诉我。