Question

我已经看到了几个类似的问题，但没有达到我所看到的完全相同的问题。

我已经知道如何在标签窗格中制作网格（或多或少）。但是，他们似乎并没有像我期望的那样工作。我期望看到的是一组选项卡，每个选项卡都使用自己的个人空间来显示包含网格的数据。相反，我看到的是包含试图共享相同网格空间的数据的选项卡集，因此数据行正在堆叠，以便将它们向下推到页面上。整个选项卡区域将是必要的两倍，Tab2上的数据位于选项卡窗格的下半部分，而上半部分为空（或者将从Tab1保存数据）。

示例：

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

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
      </ul>

      <div id="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
             ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
             ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

我想弄清楚的是，如果我编码错误，或者Bootstrap根本不支持我想要完成的事情。我已经测试了删除.row div的想法，但没有成功。（数据堆栈不均匀，而不是停留在单独的行中。）看起来好像.col * - *类即使在隐藏时也无法共享相同的空间。

有什么想法吗？

Answer 1

您在带有标签的容器上缺少.tab-content课程，这会将display:none应用于隐藏的标签。此外，您的两个标签都有active类，这使得它们都会在开头显示。

这是标记：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a>
        </li>
        <li><a data-toggle="tab" href="#tab2">Tab2</a>
        </li>
      </ul>

      <div id="tab-content" class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
          <div class="row">
            <div class="col-sm-6">
              ...tab1, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab1, col2 information...
            </div>
          </div>
        </div>
        <div id="tab2" class="tab-pane fade">
          <div class="row">
            <div class="col-sm-6">
              ...tab2, col1 information...
            </div>
            <div class="col-sm-6">
              ...tab2, col2 information...
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

Answer 2

工作示例

＆＃13;

#tabby h3 {
  color: white;
  background-color: #428bca;
  padding: 5px 15px;
  margin-bottom: 0;
}
.colorBlue {
  color: white;
  background-color: #266080;
  padding: 15px;
  margin: 0;
}
.colorRed {
  color: white;
  background-color: #f00;
  padding: 15px;
}
.colorYellow {
  color: white;
  background-color: #E4EC45;
  padding: 15px;
}
.colorGrey {
  color: white;
  background-color: #343537;
  padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Panels and Grids</h2>

</div>
<div id="tabby" class="container">
  <ul class="nav nav-tabs">
    <li class="active"> <a href="#1" data-toggle="tab">Uno</a>

    </li>
    <li><a href="#2" data-toggle="tab">Dos</a>

    </li>
    <li><a href="#3" data-toggle="tab">Tres</a>

    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="1">
      <h3>Tab One</h3>

      <div class="col-md-6 colorBlue">This is my first 6.</div>
      <div class="col-md-6 colorRed">This is my second 6.</div>
    </div>
    <!--/row-->
    <div class="tab-pane" id="2">
      <h3>Tab Two</h3>

      <div class="col-md-4 colorBlue">This is my first 3.</div>
      <div class="col-md-4 colorRed">This is my second 3.</div>
      <div class="col-md-4 colorYellow">This is my second 3.</div>
    </div>
    <div class="tab-pane" id="3">
      <h3>Tab Three</h3>

      <div class="col-md-3 colorBlue">This is my first 4.</div>
      <div class="col-md-3 colorRed">This is my second 4.</div>
      <div class="col-md-3 colorYellow">This is my second 4.</div>
      <div class="col-md-3 colorGrey">This is my second 4.</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

AJK ，这会将 Tab2 内容保持在最顶层，而不是向下移动页面。当您需要tab-content作为id时，您class为<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>HTML/CSS Block not appearing</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> body { padding-top: 50px; } .spacer { margin-top: 2%; margin-bottom: 2%; } .block { height: 240px; padding-top: 15px; background-color:orangered; } .tab2-clr { color: blue; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> <div class="container col-lg-12 spacer"></div> <div class="container block"> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab1" data-toggle="tab">Tab1</a> </li> <li><a href="#tab2" data-toggle="tab">Tab2</a> </li> </ul> <div class="tab-content "> <div class="tab-pane active" id="tab1"> <div class="col-xs-6"> <h4>...tab1, col1 information...</h4> </div> <div class="col-xs-6"> <h4>...tab1, col2 information...</h4> </div> </div> <div class="tab-pane fade in tab2-clr" id="tab2"> <div class="col-xs-6"> <h4>...tab2, col1 information...</h4> </div> <div class="col-xs-6"> <h4>...tab2, col2 information...</h4> </div> </div> </div> </div> </div> </div>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> 另外，如果你不想像我在这里展示的那样堆叠文本的div，请使用col-xs-xx。

bootstrap tabs

gyp

Answer 4

我也有这个问题。我通过使用已接受的答案进行实验，然后在这里我得到的解决方案

在标签内容中添加行类比如：

<div class="tab-content"> 
    <div class="row"> 
       <!-- Write your grid column in here -->


    </div>

</div>

如何使选项卡窗格中的Bootstrap网格按预期工作？

4 个答案:

我也有这个问题。我通过使用已接受的答案进行实验，然后在这里我得到的解决方案