Как добиться свертывания, как в навигации Bootstrap для обычных DIV?

У меня есть 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, но не смог узнать, что именно управляет этим поведением.

Как заставить DIVs автоматически свертываться на небольших экранах и предоставлять кнопку переключения? Можно ли это сделать, используя только классы Bootstrap (без дополнительного JS)?

Ответы

Ответ 1

вы должны запустить медиа-запрос на 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>

Ответ 2

Здесь вы найдете решение 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>

Ответ 3

Я попытался сделать то, что вы просите, используя чисто CSS. Я не использовал бутстрап, но эмулировал идею сетки и что не с очень простым 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 со всеми рабочими частями.

Ответ 4

Основываясь на моем понимании моего вопроса, я считаю, что ваши требования таковы:

  • Используйте аккордеон, чтобы укрыть содержимое столбца, когда размеры экрана являются мобильными (в терминах начальной загрузки, ширина которых будет меньше, чем md).
  • Используйте обычную схему сетки, когда ширина шире, чем мобильная (ширина больше, чем обозначение md).

Обратите внимание, что обозначение md относится к ширине 992px:), которое пригодится в нашем решении.

Существует несколько способов решения вашей проблемы: мы можем использовать чисто JS-решение, где мы динамически создаем и уничтожаем аккордеон, основанный на ширине видового экрана, прослушиваемый событием $(window).resize(), но это крайне неэффективно и чрезвычайно unperformant (если вы не дросселируете событие, которое вызывает еще один ряд проблем, таких как отзывчивость).

Решение, которое я рассмотрел, будет просто использовать стандартную бутстрап-аккордеонную/разборную разметку, с некоторым простым CSS-трюком, чтобы заставить ее работать:

  • Мы предполагаем стандартную компоновку аккордеонов, но встроены в некоторые классы сетки для использования в более широких видовых экранах
  • Мы используем @media (min-width: <md-width>), a.k.a. @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, которые мешают компоновке сетки, а .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;
  }
}

Учитывая все это, здесь приведен пример доказательной концепции (вы также можете обратиться к примеру 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>

Ответ 5

Ответственный за крах в Bootstrap 3.x - collapse.js, но технически говорить с CSS не так сложно. (а не только классы Bootstrap) и, по крайней мере, некоторые JS для обработки щелчка по кнопке переключения. Если вы заинтересованы в этом, сообщите мне, поэтому я могу предоставить код.

Ответ 6

Можно рушить меню вручную так же, как бутстрап, фактически не используя его. Это можно сделать, объединив

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";
 }
}

Предполагается, что ширина маленького экрана ниже 370 пикселей. Изменение размера окна браузера запускает функцию, которая проверяет ширину веб-браузера и изменяет коды innerHTML первых двух столбцов, если условие для маленького экрана выполнено. В качестве альтернативы мы также можем добавить слушателя событий, зарегистрированного в окне, который запускает функцию события каждый раз при изменении размера окна.

window.addEventListener('resize', eventresize);

Также невозможно создать кнопку переключения без дополнительного js файла.