如何在常见DIV的Bootstrap导航中实现折叠？

Question

我有一个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启动器模板 "克隆"它,但无法找到,究竟是什么管理这种行为.

如何让DIV在小屏幕上自动折叠并提供切换按钮？是否可以通过仅使用Bootstrap类(没有额外的JS)来实现这一点？

Answer 1

在这里,您可以使用解决方案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 类容器内.

Answer 2

您应该参考自定义包装类在导航上运行媒体查询，复制粘贴，检查此代码，它可以工作

<!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>