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

Question

我见过一些与此类似的问题，但没有遇到与我见过的完全相同的问题。

我已经知道如何使网格（或多或少）在选项卡窗格中工作。但是，它们似乎并没有像我预期的那样工作。我希望看到的是一组选项卡，每个选项卡都使用自己的个人 space 来显示包含网格的数据。相反，我看到的是带有试图共享同一网格 space 的数据的选项卡集，因此数据行正在堆叠，以便将它们向下推到页面上。整个选项卡区域将是所需高度的两倍，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*-* 类无法共享相同的 space，即使在隐藏时也是如此。

有什么想法吗？

Answer 1

您在带有选项卡的容器上缺少 .tab-content class，这适用于 display:none 隐藏的选项卡。此外，您的两个选项卡都有 active class，这使得它们都显示在开头。

这是标记：

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

Answer 2

工作示例

#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;
}

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

Answer 3

AJK，这将使Tab2内容保持在顶部，不会向下移动页面。当您只需要 class.
时，您将 tab-content 作为 id 此外，如果您不希望带有文本的 div 像我在此处显示的那样堆叠，请使用 col-xs-xx。

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

    <!-- Bootstrap core CSS -->
    <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><!--/.nav-collapse -->
      </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>
    
    
    

    

    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <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>

Answer 4

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

在您的标签内容中添加行 class 例如：

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


    </div>

</div>

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

How do I make Bootstrap grids work as expected inside a tab pane?

html

css

jquery

tabs

twitter-bootstrap

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