2013-07-20 3 views
3

Я использую фрагмент кода от https://bootsnipp.com/snipps/vacation-rentalsКак добавить меню настроек вкладки в раскрывающееся меню мега?

Этот фрагмент предоставляет пользователю набор из 3 вариантов с вкладками меню.

Пожалуйста, проверьте website, и вы увидите, как работает это меню с вкладками.

enter image description here

Это код этого фрагмента

<div class="row-fluid"> 
    <div class="span12"> 
     <div class="row-fluid"> 
      <div class="span12"> 
       <div class="tabbable tabs-left"> 

        <ul class="nav nav-tabs" style="padding-top:15px;margin-left:-20px;"> 
         <li class="active"><a href="#A" data-toggle="tab">Apartman A2(1+1)</a></li> 
         <li><a href="#B" data-toggle="tab">Apartman A4(2+2)</a></li> 
         <li><a href="#C" data-toggle="tab">Apartman A6(4+2)</a></li> 

        </ul> 

        <div class="tab-content"> 
         <div class="tab-pane active" id="A"> 
          <img src="http://placehold.it/80x80"> 
         </div> 
         <div class="tab-pane" id="B"> 
          <img src="http://placehold.it/80x80"> 
         </div> 
         <div class="tab-pane" id="C"> 
          <img src="http://placehold.it/80x80"> 
         </div> 
        </div> 
       </div> <!-- /tabbable --> 

      </div> 
     </div> 
    </div> 
</div> 
<hr> 

Однако я пытаюсь добавить это на мой сайт, и он получает осуществляется из верхней Ли, ул поведения и не Работа.

Это будет так.

enter image description here

Это мой сайт http://www.carantina.com

Пожалуйста, проверьте страницу 'Продукция', и вы увидите, что я имею в виду.

Если я могу переопределить предыдущие стили поведения стиля ul, li и установить их в стили бутстрапа по умолчанию, это может сработать. Но я не мог этого сделать.

ответ

0

Это потому, что у вас есть tabbable элемент внутри navbar, а некоторые стили css, ссылающиеся на вкладки, повреждены стилями navbar.

Попробуйте добавить этот стиль:

.navbar .tabs-left>.nav-tabs>li { 
    float: none; 
} 

И искать другие стили, которые повреждаются. Хотя это не все, что плохо работает.

+0

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

+0

Мой совет: откройте файл bootstrap.css (не проиндексирован), найдите строки, где определен элемент '.tabbable', скопируйте его (или только некоторые части, если вы знаете, что вам нужно), и добавьте каждое правило с помощью'. navbar' –

+0

Я не хочу редактировать ядро ​​много. Но если ничего не получится, я попытаюсь это сделать. – SNaRe