Щебетать Бутстрап-жидкость-контейнер

Я использую twitter bootstrap для разработки приложения. 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 hides и span9 изменяется на span12. Это как-то хорошо работает. Но при втором щелчке span3 показывает сначала, а затем только контент span12 уменьшается до span9. Из-за этого контента скачок вниз до него уменьшается до span9. Я хочу это исправить. При втором щелчке, span12 до 9 сначала, а затем на боковой панели... что-то вроде этого.

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

Ответы

Ответ 1

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

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

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

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

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

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

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

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