Аккордеон на шесть расположений столбцов с Bootstrap

Я пытаюсь получить следующий аккордеон для перехода в шестистолбцовый макет начальной загрузки, когда экран шире. Я могу легко иметь две настроенные версии, с аккордеонами, видимыми в xs, и второй версией, видимой в см и выше, но я хотел бы сохранить ее в одном. Любая помощь и/или советы будут очень признательны.Аккордеон на шесть расположений столбцов с Bootstrap

<div class="panel-group visible-xs text-center" id="accordion1"> 
    <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne1"> 
     <h4 class="panel-title">ABOUT US</h4> 

    </div> 
    <div id="collapseOne1" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a> 
        </li> 
        <li><a href="">Events</a> 
        </li> 
       </ul> 
     </div> 
    </div> 
</div> 


    <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne2"> 
     <h4 class="panel-title">ABOUT US</h4> 
    </div> 
    <div id="collapseOne2" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 


     <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne3"> 
     <h4 class="panel-title">ABOUT US</h4> 
    </div> 
    <div id="collapseOne3" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 

    <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne4"> 
     <h4 class="panel-title">ABOUT US</h4> 
    </div> 
    <div id="collapseOne4" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 

    <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne5"> 
     <h4 class="panel-title">ABOUT US</h4> 
    </div> 
    <div id="collapseOne5" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
       </ul> 
     </div> 
    </div> 
</div> 
    <div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne6"> 
     <h4 class="panel-title">ABOUT US</h4> 

    </div> 
    <div id="collapseOne6" class="panel-collapse collapse"> 
     <div class="panel-body"> 
       <ul> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
        <li><a href="">Events</a></li> 
       </ul> 
     </div> 
    </div> 
</div>

fiddle.

источник

2015-07-30 Brian

Я не понимаю вопроса, что вы пытаетесь сделать снова и в чем проблема? –

Я просто хочу, чтобы контент «вышел из аккордеона» выше мобильной ширины и отображался через шесть столбцов с каждой div ul в своей колонке. В принципе, как я могу вытащить контент из аккордеона на более широкой ширине. – Brian

Вы хотите гармошку для 'xs' и регулярных' div 'для' sm' и больше? –

1. Единственное решение я могу думать о без дублирующие ваш контент-код, чтобы получить ширину устройства на сервере (Джанго) стороны и сделать шаблон с) ах аккордеон для xs и б) стандарт div s для чего-нибудь еще. Никогда не делал этого, но похоже, что это possible.

2. Другой вариант заключается в использовании responsive utilities бутстраповского:

<div class="visible-xs">phone size 
    <!-- content in accordion goes here --> 
</div> 
<div class="hidden-xs">sm and larger 
    <!-- same content in standard divs --> 
</div>

^fiddle^

Как вы можете видеть, второй вариант требует дубликат контента, который является плохой практикой - рефакторинга и обновление будет кошмар.

Честно говоря, я бы не использовал ни один из вариантов выше, но я думал, что вы хотите узнать об этом. Что вы можете сделать, вероятно, найти способ «расширить» второй вариант и, возможно, заселить div с js - вероятно, будет массивный файл.

В любом случае, дайте мне знать, как это работает.

источник

2015-07-31 02:31:44

Спасибо за ответ. В настоящее время я настроил его на один для xs и второй для sm и выше, но, как вы сказали, дублировать контент - это то, чего я пытаюсь избежать. Я продолжу подключаться к этому и следить за любым прогрессом. – Brian

Проблема с попыткой избежать дублирования контента заключается в том, что у вас есть атрибуты переключения данных (и т. Д.). Вы могли бы избежать их вмешательства, перемещая метки ul где-то в чистоте при загрузке страницы, если вы обнаружите правильное разрешение экрана, используя что-то вроде отзывчивого инструментария для начальной загрузки javascript: https://github.com/maciej-gurban/responsive-bootstrap-toolkit.

Что-то вроде

[html contains your accordion as normal, plus this:] 
    <div id="accordion-grid" class="row"></div> 

    <script> 
     (function($, viewport) { 
      $(document.ready(checkAccordionSize(viewport)); 

      function checkAccordionSize(vp) { 
        if (vp.is('>xs')) { 
        //gather the UL tags. for each one: 
        //create a new column in the extra div 
        //then move the UL tag there. 

        //when done, use jQuery .hide() to hide the accordion. 
        } 
      } 
    })(jQuery, ResponsiveBootstrapToolkit); 
</script>

Для немного больше работы, которую вы могли бы поддержать window.resize тоже.

источник

2015-07-31 14:30:50

Я забыл сказать спасибо за предложение! – Brian

Аккордеон на шесть расположений столбцов с Bootstrap

ответ

Смежные вопросы