如何实现像在常见 DIV 的引导程序导航中一样折叠

我有一个 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        |
|                       |
|                       |
|                       |
|                       |
-------------------------

现在我希望前两列像典型的引导程序导航一样折叠：

-------------------------
|   #block1 .col-12   ≡ |
-------------------------
-------------------------
|   #block2 .col-12   ≡ |
-------------------------
-------------------------
|                       |
|                       |
|                       |
|                       |
|                       |
|   #block3 .col-12     |
|                       |
|                       |
|                       |
|                       |
-------------------------

我试图从 Bootstrap 入门模板"克隆"它，但无法找到究竟是什么管理这种行为。

如何让 DIV 在小屏幕上自动折叠并提供切换按钮？是否可以仅使用引导类(无需其他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类容器。

您应该参考自定义包装器类在 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>

我试图使用纯粹的 CSS 来制作你所要求的。我没有使用引导程序，而是模拟了网格的想法，而不是使用非常简单的 CSS。我还使用了一个复选框来控制导航栏的切换，但是如果需要，您可以将切换移出屏幕并使用汉堡包！

通过使用最大高度和我希望切换的任何内容的特殊包装器，这已经成为可能。任何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。

根据我对我问题的理解，我相信你的要求是这样的：

使用折叠式允许在屏幕大小可移动时隐藏列内容(在引导术语中，宽度将小于md指定)。
当宽度大于移动宽度(宽度大于md指定)时，使用普通网格布局。

请注意，md名称是指宽度为 992px :)这将在我们的解决方案中派上用场。

有几种方法可以解决您的问题：我们可以使用一个纯粹的基于 JS 的解决方案，在该解决方案中，我们根据视口宽度动态创建和销毁手风琴，由$(window).resize()事件监听，但这效率非常低且性能极差(除非您限制事件，这会带来另一个问题，例如响应能力)。

我探索的解决方案是简单地使用标准的引导手风琴/可折叠标记，使用一些简单的CSS来使其工作：

我们假设手风琴的默认布局，但内置了一些网格类，以便在更宽的视口中使用
我们使用@media (min-width: <md-width>)，又名@media (min-width: 992px)覆盖折叠面板中的某些样式，以便它们不会干扰较宽视口下的网格布局。

考虑到这一点，我们可以研究将您的标记构建如下：

.container
- .row
- .panel-group，里面装着你所有的手风琴东西
  - .panel，其中包含您的面板内容。可以对任意数量的列/面板重复此操作
  - .panel-heading+.visible-xs .visible-sm，以便嵌套面板控件仅在窄视口(大小<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元素添加边距和边框，并且当.collapse类存在时，.panel-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;
}
}

考虑到所有这些，这里有一个概念验证示例(您也可以参考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>

导致 Bootstrap3.x 崩溃的是 collapse.js，但从技术上讲，使用 CSS(不仅仅是 Bootstrap 类)和至少一些 JS 来处理点击切换按钮并不难实现。如果您对此感兴趣，请告诉我，以便我可以提供一些代码。

可以像引导程序一样手动折叠菜单，而无需实际使用它。这可以通过组合来完成

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文件，则无法创建切换按钮。

相关内容

最新更新

热门标签：