在Bootstrap 3标签页面内跨越全宽的网格列

我似乎无法得到这个工作 - 我的列全长。 Here's a JSfiddle for direct use 在Bootstrap 3标签页面内跨越全宽的网格列

<div class="container-fluid"> 
<div class="panel panel-default"> 
    <div class="panel-body"> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li> 
      <a href="#p1" class="btn btn-primary" role="tab" data-toggle="tab"> 
       <span class="glyphicon glyphicon-cloud"></span> 
      </a> 
     </li> 
     <li> 
      <a href="#p2" class="btn btn-primary" role="tab" data-toggle="tab"> 
       <span class="glyphicon glyphicon-cloud"></span> 
      </a> 
     </li>   
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 

     <!--Open Panel Controls--> 
     <div class="tab-pane active" id="p1"> 
      <!-- HERE IS THE PROBLEM AREA - I want a grid here, but no luck :-/ --> 
      <div class="row"> 
       <div class="column-md-4" style="background: green;"> 
        This is my first column 
       </div> <!-- /col emulator--> 
       <div class="column-md-1"> 
       These are buttons 
       </div> 
      </div> <!--/row--> 
     </div> 

     <div class="tab-pane" id="p2"> 
      <div class="row"> 
       <div class="column-md-4" style="background: red;"> 
        This is my first column, page 2 
       </div> <!-- /col emulator--> 
       <div class="column-md-1"> 
       These are buttons, page 2 
       </div> 
      </div> <!--/row--> 
     </div> 

     </div> <!-- /tab-content --> 

    </div> <!-- /panel-body --> 
    </div> <!-- /panel> 
</div> <!-- /container-fluid --> 


    <script src="/scripts/bootstrap.min.js"></script>

来源

2014-09-27 Hamy

哎哟，简单的错误。这是修复

  <!-- It's col, not column --> 
      <div class="col-md-4" style="background: green;"> 
       This is my first column 
      </div> <!-- /col emulator--> 
      <div class="col-md-1">

来源

2014-09-27 16:12:09 Hamy

在Bootstrap 3标签页面内跨越全宽的网格列

回答

相关问题