我有一个像这样的 3 列布局
<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)来做到这一点?
最佳答案
给您一个解决方案 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 和 col-2,内容将进入 collapse
类容器。
关于twitter-bootstrap - 如何实现普通 DIV 的 Bootstrap 导航中的折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45555901/