打破自举网格系统之前，可以在行和列之间嵌套多少？

美好的一天，打破自举网格系统之前，可以在行和列之间嵌套多少？

我是网页设计的新手，你可以看到。我一直在玩弄Bootstrap的各种组件，并且设法创建了一个使用工具提示与用户交互的应用程序的“插图”/示例。 此设计嵌套在制表符切换中，应占用容器col-md-6的一半，但不允许其他col-md-6。我的设计可能非常糟糕，但我需要了解它是否有可能最终耗尽电网？如果不是，我做错了什么？

我还需要注意tab切换不是主要的导航栏。它应该作为一个独立的容器。 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>

来源

2016-02-26 Ebraheem Isaacs

link is here现在，我可以说，嵌套行数没有限制，但PLZ经过链接为了更清楚.. !!

为了避免水平滚动试试这个

code.css

body { 
    overflow-x: hidden; 
}

来源

2016-02-26 09:55:54 user

感谢@hari我曾尝试加入COL-MD-6旁边，因为它是在同一排。但是屏幕会将整个页面向左拉，留下大量空白区域。 –

soo ..请告诉我你是否得到一个水平滚动条.. ??我会澄清你最多可以在一行中使用2（col-md-6） – user

是的，我不知道跨度是多少。 –

打破自举网格系统之前，可以在行和列之间嵌套多少？

回答

相关问题