打破自舉網格系統之前，可以在行和列之間嵌套多少？

美好的一天，打破自舉網格系統之前，可以在行和列之間嵌套多少？

我是網頁設計的新手，你可以看到。我一直在玩弄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

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

打破自舉網格系統之前，可以在行和列之間嵌套多少？

回答

相關問題