css - 在 Bootstrap 3 选项卡 Pane 中跨越整个宽度的网格列

Question

我似乎无法让它工作 - 我的列变满了。 Here's a JSfiddle for direct use

<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>

Answer 1

哎呀，一个简单的错误。这是修复

          <!-- 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">