twitter-bootstrap 如何使 Bootstrap 网格在选项卡窗格中按预期工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31350965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make Bootstrap grids work as expected inside a tab pane?
提问by AJK
I've seen a few questions similar to this, but not hitting the exact same problem that I have seen.
我已经看到了一些与此类似的问题，但没有遇到与我所看到的完全相同的问题。
I already know how to make grids (more or less) work inside a tab pane. However, they don't seem to be working as I expect. What I expect is to see is a set of tabs, each using their own personal space to display grid-contained data. What I see, instead, is sets of tabs with data that is attempting to share the same grid space, and therefore the rows of data are stacking so that they are pushed down the page. The entire tab area will be twice as high as necessary, with the data on Tab2 being located on the bottom half of the tab pane, while the top half is empty (or would be holding data from Tab1).
我已经知道如何使网格（或多或少）在选项卡窗格中工作。但是，它们似乎并没有像我期望的那样工作。我期望看到的是一组选项卡，每个选项卡都使用自己的个人空间来显示包含网格的数据。相反，我看到的是带有数据的选项卡集，它们试图共享相同的网格空间，因此数据行正在堆叠，以便它们被推下页面。整个选项卡区域将是必要的两倍高，Tab2 上的数据位于选项卡窗格的下半部分，而上半部分是空的（或将保存来自 Tab1 的数据）。
Example:
例子：
<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>
What I'm trying to figure out is if I'm coding something wrong or if Bootstrap simply does not support what I'm trying to accomplish. I have already tested the idea of removing the .row divs, with no success. (The data stacks unevenly, rather than staying in separate rows.) It appears as if .col*-* classes are unable to share the same space, even while hidden.
我想弄清楚的是，如果我编码错误，或者 Bootstrap 根本不支持我想要完成的任务。我已经测试了删除 .row div 的想法，但没有成功。（数据堆叠不均匀，而不是保持在单独的行中。）看起来好像 .col*-* 类无法共享相同的空间，即使隐藏也是如此。
Any ideas?
有任何想法吗？
回答by halfzebra
You're missing .tab-contentclass on the container with tabs, which applies display:noneto the hidden ones. Also, both of your tabs have activeclass, which makes both of them to show up at the beginning.
您缺少.tab-content带有标签的容器上的类，这适用display:none于隐藏的标签。此外，您的两个选项卡都有active类，这使它们都显示在开头。
Here is the markup:
这是标记：
<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>回答by vanburen
Working example
工作示例
#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>回答by AngularJR
AJK, This will keep the Tab2content to the top and not move down the page. You had tab-contentas a idwhen you just needed it as a class.
Also if you do not want the divs with the text to stack like I show here use col-xs-xx.
AJK，这将使Tab2内容保持在顶部而不是向下移动页面。你有tab-content作为id的时候，你只需要它作为一个class。
此外，如果您不希望带有文本的 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>回答by navotera
I have this issues too. i experimenting by using accepted answer then here the solution i got
我也有这个问题。我通过使用接受的答案进行实验，然后我得到了解决方案
add row class in your tab content such as this :
在选项卡内容中添加行类，例如：
<div class="tab-content">
<div class="row">
<!-- Write your grid column in here -->
</div>
</div>
