我正在为我的应用构建网络仪表板。它动态加载不同的模块并将它们放入 Bootstrap 容器中。这些模块的高度可以变化，当浏览器窗口足够窄时，它们会垂直堆叠。这就是我想要的。
问题在于更高的分辨率。我想将它们堆叠成 3 列，所以我将每个面板都放在 <div class="col-sm-4"> 中
如果我们只有 3 个面板，效果会很好。第四，我们得到这样的东西:
我搜索了其他方法并找到了一种建议删除 <div class="col-sm-4"> 的方法
所以我做的结果很差:
唯一可行的方法是手动将面板添加到其中一列。
这产生了预期的结果，但需要更多的 JS 逻辑来运行。我需要计算我有多少面板并选择合适的列。这是唯一的出路还是我错过了什么？谢谢!
已编辑 - 当然我忘了包含代码。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Stack test</h1>
<p class="lead"></p>
</div>
<!--<div class="row">-->
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
I miss panel 4 so much :(
</div>
</div>
</div>
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 3</h3>
</div>
<div class="panel-body">
Such panel. Much content. Wow.
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
End of long content.
</div>
</div>
</div>
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 4</h3>
</div>
<div class="panel-body">
I don't want to have that much space above me!
</div>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
最佳答案
尝试像here 那样稍微改变现有的布局.
代码:
<div class="container">
<div class="page-header">
<h1>Stack test</h1>
<p class="lead"></p>
</div>
<div class="row">
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1</h3>
</div>
<div class="panel-body">
I miss panel 4 so much :(
</div>
</div>
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 4</h3>
</div>
<div class="panel-body">
I don't want to have that much space above me!
</div>
</div>
</div>
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-sm-4">
<div id="panel_control_manual" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 3</h3>
</div>
<div class="panel-body">
Such panel. Much content. Wow.
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
End of long content.
</div>
</div>
</div>
</div>
</div>
关于html - Bootstrap 面板堆叠在行后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35461473/