我有一个3-col-layout，如
<div class="container">
<div class="row">
<div class="col-md-2" id="block1">#block1 .col-md-2</div>
<div class="col-md-2" id="block2">#block2 .col-md-2</div>
<div class="col-md-8" id="block3">#block3 .col-md-8</div>
</div>
</div>
----------------------------------------------------------------
| | | |
| | | |
| | | |
| | | |
| #block1 | #block2 | #block3 |
| .col-2 | .col-2 | .col-8 |
| | | |
| | | |
| | | |
| | | |
----------------------------------------------------------------
在小屏幕上，列一个在另一个下面滑动：
-------------------------
| |
| |
| |
| |
| #block1 |
| .col-12 |
| |
| |
| |
| |
-------------------------
-------------------------
| |
| |
| |
| |
| #block2 |
| .col-12 |
| |
| |
| |
| |
-------------------------
-------------------------
| |
| |
| |
| |
| #block3 |
| .col-12 |
| |
| |
| |
| |
-------------------------
现在我希望前两列像典型的Bootstrap导航一样崩溃：
-------------------------
| #block1 .col-12 ≡ |
-------------------------
-------------------------
| #block2 .col-12 ≡ |
-------------------------
-------------------------
| |
| |
| |
| |
| |
| #block3 .col-12 |
| |
| |
| |
| |
-------------------------
我试图从Bootstrap starter template“克隆”它，但无法找到，究竟是什么来管理这种行为。
如何让DIV在小屏幕上自动折叠并提供切换按钮？是否可以通过仅使用Bootstrap类（没有额外的JS）来实现这一点？
答案 0 :(得分：5)
您可以使用解决方案https://jsfiddle.net/mhmvhsf6/
.col{
border: 1px dotted #000;
min-height: 50px;
}
.collapse {
height: 200px;
background: rgba(0,0,0,0.3);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col">
<div class="navbar-header navbar-inverse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col">
<div class="navbar-header navbar-inverse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse2">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col"></div>
</div>
</div>
希望这会对你有所帮助。
Col-1 ＆amp; col-2 ，内容将进入collapse 类容器。
答案 1 :(得分：3)
我尝试使用纯CSS制作您要求的内容。我没有使用bootstrap，但是模仿了网格的想法，而不是非常简单的CSS。我还使用了一个复选框来控制导航栏的切换，但您可以将切换屏移开并使用汉堡包，如果这是您需要的！
通过对我希望切换的任何内容使用max-height和特殊包装，这已成为可能。任何CSS转换都可以用Javascript替换。
<强> HTML
<div class="container">
<div class="row">
<div class="col col-1">
<input class="toggle toggle-inputs" id="toggle1" type="checkbox" />
<label class="toggle-inputs" for="toggle1">Toggle</label>
<div class="mobile-toggle">
<p>Paragraph 1</p>
</div>
</div>
<div class="col col-2">
<input class="toggle toggle-inputs" id="toggle2" type="checkbox" />
<label class="toggle-inputs" for="toggle2">Toggle</label>
<div class="mobile-toggle">
<p>Paragraph 2</p>
</div>
</div>
<div class="col col-3">
<p>Paragraph 3</p>
</div>
</div>
</div>
相关的CSS
.toggle-inputs {
display: none;
}
.toggle:checked ~ .mobile-toggle {
max-height: 2000px; /* make larger than it might ever be */
}
@media (max-width: 768px) {
.toggle-inputs {
display: inline;
}
.mobile-toggle {
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 0.3s ease-out;
-o-transition: max-height 0.3s ease-out;
-ms-transition: max-height 0.3s ease-out;
transition: max-height 0.3s ease-out;
}
}
这是一个包含所有工作部分的JSFiddle。
答案 2 :(得分：3)
你应该参考自定义包装类在nav上运行媒体查询，复制粘贴，检查这段代码，它是否正常工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.col{
border: 1px dotted #000;
min-height: 50px;
}
.collapse {
height: 200px;
background: rgba(0,0,0,0.3);
}
@media (max-width: 992px) {
.custom_wrapper .navbar-header {
float: none;
}
.custom_wrapper .navbar-left, .custom_wrapper .navbar-right {
float: none !important;
}
.custom_wrapper .navbar-toggle {
display: block;
}
.custom_wrapper .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.custom_wrapper .navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.custom_wrapper .navbar-collapse.collapse {
display: none!important;
}
.custom_wrapper .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.custom_wrapper .navbar-nav>li {
float: none;
}
.custom_wrapper .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.custom_wrapper .collapse.in{
display:block !important;
}
}
</style>
<div class="container-fluid custom_wrapper">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col">
<div class="navbar-header navbar-inverse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
test
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col">
<div class="navbar-header navbar-inverse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse2">
test2
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col">
test 3
</div>
</div>
</div>
</body>
</html>
答案 3 :(得分：2)
根据我对我的问题的理解，我相信您的要求是这样的：
md名称）。md指定）时使用普通网格布局。请注意md designation refers to a width of 992px :)将在我们的解决方案中派上用场。
有几种方法可以解决您的问题：我们可以使用基于JS的纯解决方案，我们根据视口宽度动态创建和销毁手风琴，由$(window).resize()事件监听，但效率非常低并且非常无形（除非你限制事件，这会带来另一系列问题，例如响应性）。
我探索的解决方案只是使用标准的bootstrap手风琴/可折叠标记，一些简单的CSS很难让它工作：
@media (min-width: <md-width>)，a.k.a。@media (min-width: 992px)来覆盖折叠面板中的某些样式，以便它们不会干扰更宽视口的网格布局。考虑到这一点，我们可以考虑构建您的标记：
.container
.row .panel-group，其中包含您所有的手风琴
.panel，其中包含您的面板内容。 可以针对您想要的任意数量的列/面板重复此操作 .panel-heading + .visible-xs .visible-sm，以便嵌套的面板控件仅在窄视口（尺寸＆lt; md）.panel-collapse + .col-md-4，具有适当网格布局宽度的各个面板/列的内容考虑到这种结构，这里有一个可以重用于所有面板的模板：
<!-- First panel/column -->
<div class="panel">
<!-- Panel heading, visible at screen sizes < md (i.e. xs and sm only) -->
<div class="panel-heading visible-xs visible-sm">
<h1 class="panel-title">
<a href="#col1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true" aria-controls="col1">Column 1</a>
</h1>
</div>
<!-- Panel content -->
<div id="col1" class="col-md-4 panel-collapse collapse in" role="tabpanel" aria-labelledby="col1">
<!-- Insert content here -->
</div>
</div>
注意：我在这里看不到导航切换的实用程序，因为它通常用于在视口太窄时隐藏其他导航链接。但是，如果您坚持使用它，则可以在.panel-heading内修改您的标记：
<h1 class="panel-title navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#col1" aria-expanded="true" aria-controls="col1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#col1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true" aria-controls="col1">Column 1</a>
</div>
</h1>
还记得默认的面板样式吗？它们会为.panel元素添加边距和边框，从而干扰网格布局，.panel-collapse类存在时隐藏.collapse。为此，我们只需要一个媒体查询来禁用宽度大于或等于md指定的这些样式，即@media (min-width: 992px)，以便
.panel-collapse.collapse将被强制显示（即无论是否在狭窄的视口中折叠，都应显示面板）.panel不应具有干扰网格布局的边距和边框因此，我们这样做：
@media (min-width: 992px) {
#accordion .panel-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
#accordion .panel {
margin: 0;
border: none;
}
}
考虑到所有这些，这是一个概念验证示例（you can also refer to an example on jsfiddle）。请注意，您必须运行代码段，然后在完整视图中打开/展开它，以便您可以使用不同的视口大小:)
@media (min-width: 992px) {
#accordion .panel-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
#accordion .panel {
margin: 0;
border: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<!-- First panel/column -->
<div class="panel">
<div class="panel-heading visible-xs visible-sm">
<h1 class="panel-title">
<a href="#col1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true" aria-controls="col1">Column 1</a>
</h1>
</div>
<div id="col1" class="col-md-4 panel-collapse collapse in" role="tabpanel" aria-labelledby="col1">
<h2>Column/Panel header 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum dolorem</p>
</div>
</div>
<!-- Second panel/column -->
<div class="panel">
<div class="panel-heading visible-xs visible-sm">
<h1 class="panel-title">
<a href="#col2" data-parent="#accordion" data-toggle="collapse" aria-expanded="false" aria-controls="col2">Column 2</a>
</h1>
</div>
<div id="col2" class="col-md-4 panel-collapse collapse" role="tabpanel" aria-labelledby="col2">
<h2>Column/Panel header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum dolorem</p>
</div>
</div>
<!-- Third panel/column -->
<div class="panel">
<div class="panel-heading visible-xs visible-sm">
<h1 class="panel-title">
<a href="#col3" data-parent="#accordion" data-toggle="collapse" aria-expanded="false" aria-controls="col3">Column 3</a>
</h1>
</div>
<div id="col3" class="col-md-4 panel-collapse collapse" role="tabpanel" aria-labelledby="col3">
<h2>Column/Panel header 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum dolorem</p>
</div>
</div>
</div>
</div>
答案 4 :(得分：0)
可以像启动一样手动折叠菜单而不实际使用它。这可以通过组合
来完成window.onresize = resize;
function resize()
{
//code to be run after window resize
}
使用window.innerWidth属性查找窗口的当前宽度。
对于您的示例，您可以使用以下代码来实现功能：
window.onresize = resize;
function eventresize()
{
var w = window.innerWidth;
if(w<370)
{
var a =document.querySelectorAll(".col-md-4")[0];
var b = document.querySelectorAll(".col-md-4")[1];
a.innerHTML="//collapsed nav-bar HTML code";
b.innerHTML="//collapsed nav-bar HTML code";
}
}
假设小屏幕的宽度低于370px。浏览器窗口的大小调整触发一个功能，该功能检查Web浏览器的宽度，如果满足小屏幕的条件，则更改前两列的innerHTML代码。 或者，我们还可以添加一个注册到窗口的事件侦听器，每次调整窗口大小时都会触发事件函数。
window.addEventListener('resize', eventresize);
如果没有额外的js文件，也无法创建切换按钮。