Twitter Bootstrap Контейнер для жидкости Боковая панель Toggle - PullRequest
Новая
       1

Twitter Bootstrap Контейнер для жидкости Боковая панель Toggle

15 голосов
/ 09 февраля 2012

Я использую загрузчик Twitter для разработки приложения.2 колонки макета.Одна боковая панель и основной контент.Ниже приведен макет.

<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
        <i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div>

При нажатии на ссылку внутри контента я хочу скрыть боковую панель и контент, чтобы занять всю страницу.В настоящее время мне удалось сделать это следующим образом, 

$(document).ready(function(){
$(window).resize(function () { plot(); });

$('.toggles').click(function() {
  $('.target').toggle('fast', function() {
    $('.contents').toggleClass('span12'),
    $('.contents').toggleClass('span9'),
    $('.toggles').toggleClass('icon-chevron-right'),
  });
});
});

Но я вижу поле в левой части после скрытия span3.Это нужно удалить.Также в этом методе скрытия, при первом щелчке span3 скрывается, и span9 изменяется на span12.Это как-то работает нормально.Но при втором щелчке сначала отображается span3, а затем только контент span12 уменьшается до span9.Из-за этого контент прыгает вниз, пока не уменьшится до span9.Я хочу это исправить.При втором щелчке, span12, чтобы охватить сначала 9, а затем показывать боковую панель… что-то в этом роде.

Я видел много подобных сообщений, в которых вместо «spanXX» используются классы «content» и «sidebar».,Но это не работает в моем случае.Я не знаю почему.Помогите мне, пожалуйста ..

Ответы [ 2 ]

14 голосов
/ 21 февраля 2012

Ваш span9 div прыгает вниз из-за анимации эффекта переключения, который добавляет jQuery, он анимирует ширину и высоту, поэтому ваш контент, который находится вокруг переключаемого div, будет сдвигаться вниз по мере анимации.Вы можете преодолеть это, ускорив процесс анимации примерно до 100 миллисекунд или полностью разместив боковую панель.А что касается вопроса о марже, вызванного самой bootstrap.css, в строке 222 мы имеем следующее: 

.row-fluid > [class*="span"]:first-child {
  margin-left: 0;
}

Атрибуты first-child псевдоэлемента margin:0 для первого элемента, которыйв этом случае переключается боковая панель, поэтому, если боковая панель скрыта, второй тег span (содержимое div) не наследует это свойство и остается со стандартным значением margin, примененным к тегу span,Например, 

.row-fluid > [class*="span"] {
  float: left;
  margin-left: 2.127659574%;
}

Вы можете решить эту проблему с помощью jQuery.

Вот несколько демонстраций, которые я сделал:

Обновлена ​​скрипка с исправлением проблемы, которую комментатор обнаружил, что я сделалне заметил, теперь все работает нормально.Добавлен класс .no-sidebar, который добавляется при переключении и удаляет margin-left, созданный при начальной загрузке, поэтому теперь он отлично работает с отзывчивой таблицей стилей.

http://jsfiddle.net/andresilich/dQ5b7/23/

0 голосов
/ 29 марта 2015
...