Объединить навигационную панель внутри панели? - PullRequest
Новая
       38

Объединить навигационную панель внутри панели?

0 голосов
/ 06 сентября 2018

В моем приложении есть экран, который должен объединять 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 ... Пожалуйста, дайте мне знать, если у вас есть хороший пример или предложение, как этого добиться.

...