美好的一天，
我是网页设计的新手，你可以看到。我一直在使用Bootstrap的各种组件，并设法创建一个使用工具提示与用户交互的应用程序的示例/示例。 此设计嵌套在制表符切换中，应该占用容器col-md-6的一半，但不允许使用另一个col-md-6 。我的设计可能非常糟糕，但我需要了解网格是否可能最终耗尽？如果没有，我做错了什么？
我还需要注意，tab-toggle不是主导航栏。它应该作为一个单独的容器。 image example 请在下面找到我的HTML -
<div class="tab-content">
<div class="tab-pane fade in active" id="tab_a">
<div class="row">
<div class="jumbotron" style="margin-top: 20px; background-color: #fff">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">Service Modelling</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
SERVICE MODELLING AND RECOVERY TRANSACTIONING
</p>
</div>
<div class="row service-parts">
<div class="col-md-4">
<div class="center">
<div class="block wow fadeInUp animated" data-wow-duration="400ms" data-wow-delay="600ms">
<img src="images/mycons/dbase.png" alt="img04" style="width: 120px" height="130px" />
<h4>SOFTWARE DEVELOPMENT</h4>
<p>
Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center">
<div class="block wow fadeInUp animated" data-wow-duration="400ms" data-wow-delay="800ms">
<img src="images/mycons/bar.png" alt="img04" style="width: 120px" height="130px" />
<h4>BUSINESS CONSULTING</h4>
<p>
Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center">
<div class="block wow fadeInUp animated" data-wow-duration="400ms" data-wow-delay="1s">
<img src="images/mycons/clipb.png" alt="img04" style="width: 120px" height="130px" />
<h4>BUSINESS DEVELOPMENT</h4>
<p>
Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style="background-color: #428bca; ">
<div class="panel-body">
<ul class="nav nav-pills" style="text-decoration-color: white">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: #fff">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="popover" href="#" role="button" data-content="Keep track and model your business expenses. No more unreliable work sheets!" style="color: #fff">Expense Model
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="popover" href="#" role="button" data-content="Control your internal and external day to day services." style="color: #fff">Service Model</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="popover" href="#" role="button" data-content="Recover all your expenses before budget season ends!" style="color: #fff">Recoveries</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style="background-color: #428bca;">
<div class="panel-body">
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content=".">
Period
</button>
<div class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="images/about/grow.png" data-toggle="popover" role="button" data-content="Recover all your expenses before budget season ends!" class="img-responsive" alt="this is a title">
</div>
<div class="col-md-4">
<table class="table" data-toggle="popover" tabindex="0" data-trigger="focus" title="Something Nasty" role="button" data-content="View the periods in the break down that you want to see! SMART allows you to have full control of your finance.">
<thead class="thead-inverse">
<tr>
<th>Desc</th>
<th>Entity A</th>
<th>Entity B</th>
<th>Global</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">This</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<th scope="row">That</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<th scope="row">Things</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style ="background-color: #428bca;">
<div class="panel-body">
<p class="text-center" style="margin-bottom: -10px; margin-left: -100px; color: #fff">Powered by -
<img src="images/budgetworx.png" class="img-responsive" alt="this is a title" style="width: 50px; margin-left: 370px; margin-top: -26px">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab_b">
<div class="row">
<div class="jumbotron" style="margin-top: 20px">
<div class="section-heading">
<h1 class="title wow fadeInDown" data-wow-delay=".3s">Expense Modelling</h1>
<p class="wow fadeInDown" data-wow-delay=".5s">
SERVICE MODELLING AND RECOVERY TRANSACTIONING
</p>
</div>
</div>
<!--This is the illustration start-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style="background-color: #428bca; ">
<div class="panel-body">
<ul class="nav nav-pills" style="text-decoration-color: white">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: #fff">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="popover" href="#" role="button" data-content="Keep track and model your business expenses. No more unreliable work sheets!" style="color: #fff">Expense Model
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="popover" href="#" role="button" data-content="Control your internal and external day to day services." style="color: #fff">Service Model</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="popover" href="#" role="button" data-content="Recover all your expenses before budget season ends!" style="color: #fff">Recoveries</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style="background-color: #428bca;">
<div class="panel-body">
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content=".">
Period
</button>
<div class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="images/about/grow.png" data-toggle="popover" role="button" data-content="Recover all your expenses before budget season ends!" class="img-responsive" alt="this is a title">
</div>
<div class="col-md-4">
<table class="table" data-toggle="popover" tabindex="0" data-trigger="focus" title="Something Nasty" role="button" data-content="View the periods in the break down that you want to see! SMART allows you to have full control of your finance.">
<thead class="thead-inverse">
<tr>
<th>Desc</th>
<th>Entity A</th>
<th>Entity B</th>
<th>Global</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">This</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<th scope="row">That</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<th scope="row">Things</th>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default" style ="background-color: #428bca;">
<div class="panel-body">
<p class="text-center" style="margin-bottom: -10px; margin-left: -100px; color: #fff">Powered by -
<img src="images/budgetworx.png" class="img-responsive" alt="this is a title" style="width: 50px; margin-left: 370px; margin-top: -26px">
</p>
</div>
</div>
</div>
</div>
</div>
<!--This is the illustration end-->
</div>
</div>
<div class="tab-pane" id="tab_d">
<h4>Pane D</h4>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
</div>
<div class="tab-pane" id="tab_d1">
<h4>Pane D1</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
<div class="tab-pane" id="tab_d2">
<h4>Pane D2</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
</div>
答案 0 :(得分：0)
link is here现在我可以说没有嵌套行的限制，但是为了更清晰，请通过链接!! !!
要避免水平滚动，请尝试以下
<强> code.css
body {
overflow-x: hidden;
}