Бутстрап, расширяющий боковые панели контейнеров

-1

Я экспериментировал с Bootstrap в последнее время, пытаясь создать новый сайт. То, что я хочу реализовать, - это система с двумя столбцами (основная область тела с липкой боковой панелью, в которой есть отдельные контейнеры внутри). Я хочу, чтобы контейнеры внутри боковой панели могли расширяться, чтобы отображать больше контента, а затем сворачивать обратно в обычный onclick независимо от самой боковой панели. Основная область тела прокручивается независимо от боковой панели и наоборот, и они должны вести себя как две отдельные области.Бутстрап, расширяющий боковые панели контейнеров

По существу: 1. боковая панель будет иметь определенную ширину 2. щелкните один из контейнеров внутри боковой панели, и этот контейнер расширяет ширину и высоту перекрытия над основным корпусом. 3. Не хотите, чтобы он сдвигал общий макет, просто расширяйте его, чтобы показать больше контента.

Это мой текущий HTML:

<body> 

<header class="navbar navbar-default navbar-fixed-top" id="header"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href=""> 
     <img alt="EQO" id="logo" src="EQO.png"></img> 
     </a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
     <form class="navbar-form navbar-left" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control input-sm" placeholder="Search" name="q"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
       </div> 
      </div> 
     </form> 
     <ul class="nav navbar-nav navbar-right">    
       </li> 
       <li> 
        <a href='#'> 
         Discover! 
        </a> 
       <li> 
        <a data-toggle="modal" href='#signup'> 
         Sign up 
        </a> 
       </li> 
       <li> 
        <a data-toggle="modal" href="#login"> 
         Login 
        </a> 
       </li> 
     </ul> 
    </div><!-- /.container-fluid --> 
</header> 

<div class="container-fluid" id="main"> 
<!--main area--> 
    <div class="row"> 
     <div class="column col-md-10" id="middle"> 
      <div class="col-md-12" id="profile_picture" style=" margin-bottom: 10px; background: #ccc;"> 

      </div> 
      <ul class="nav nav-tabs"> 
        <li role="presentation" class="active"><a href="#">Home</a></li> 
        <li role="presentation"><a href="#">Profile</a></li> 
        <li role="presentation"><a href="#">Messages</a></li> 
      </ul> 
      <div class="col-md-12" style="height: 100%; background: #ccc;"> 

      </div> 
     </div> 

<!--widget area--> 
     <div class="column col-md-2" id="sidebar"> 
      <div class="col-md-12" id="widget1"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget2"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget1"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget2"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget1"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget2"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget1"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget2"> 
       Sample widget 1 
      </div> 
      <div class="col-md-12" id="widget1"> 
       Sample widget 1 
      </div> 
     </div> 
    </div> 
</div> 

<div class="navbar navbar-fixed-bottom" id="footer" > 
<!--footer area--> 
    <div class="col-md-12" id="footer_content" > 

    </div> 
</div> 

</body>

Это макет я сделал, чтобы показать, как я хочу врезку вести себя. sidebar example

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

источник

2016-09-20 Aricrepp

Во-первых, я думаю, вы должны определить новую строку для каждого виджета (вы можете иметь вложенные строки):

<div class="column col-md-2" id="sidebar"> 
    <div class="row"> 
    <div class="col-md-12" id="widget1"> 
     blabla 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12" id="widget2"> 
     blabla 
    </div> 
    </div> 
</div>

Во-вторых, для развала/расширения, вы должны добавить JQuery и набор на триггер:

data-toggle="collapse" data-target="#ID_OF_TARGET"

И на цель, право ID:

class="collapse in"

"в" здесь, чтобы заставить данные для расширения при запуске.

Я сделал a jsfiddle в качестве примера используя панель и one with simple div. Надеюсь, поможет!

источник

2016-09-20 11:18:47 bertbk

Мне это нравится, но я хотел, чтобы расширить его ширину и высоту, а не только на аккордеоне или коллапс , Это специально не сделано для мобильных телефонов – Aricrepp

. Мой плохой я не понял, и я до сих пор не знаю, чего вы хотите. Это что-то [как наложение] (http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)? – bertbk

Это можно сделать, установив корпус на полную высоту и overflow:hidden. Разрешить переполнение по каждому столбцу. Это может быть сделано в запросе медиа, так что столбцы расположены вертикально на небольших экранах ...

body { 
     overflow: hidden; 
    } 

    #main, #main>.row { 
     height: 100%; 
    } 

    #left { 
    top: 0; 
    bottom: 0; 
    overflow-y: auto; 
    } 

    #right { 
    top: 0; 
    overflow-y: auto; 
    }

http://www.codeply.com/go/uTJG2ELrRP

источник

2016-09-20 12:05:10 ZimSystem

То, что я хотел, было больше по горизонтали и вертикали, а не только аккордеон или коллапс. Не нужно фокусироваться на том, чтобы сделать его для меньшего экрана. – Aricrepp

Да, вам нужно приложить некоторые усилия, чтобы настроить его. SO не является кодирующей услугой. – ZimSystem

Я знаю, что нет ... В моем вопросе я сказал, что знаю о аккордеоне и крахе, и то, что вы прокомментировали, было именно этим. – Aricrepp

Бутстрап, расширяющий боковые панели контейнеров

ответ

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