Почему вкладки не отображаются слева?

Question

Роман Фридман @VeRe777

Web-Kun

Почему вкладки не отображаются слева?

Нужно сделать на bootstrap, чтобы вкладки отображались слева, делается это с помощью добавления класса tabs-left. Но у меня не работает этот класс, подключил bootstrap, jquery и всё необходимое, но вкладки по-прежнему отображаются ГОРИЗОНТАЛЬНО. Вот пример html-кода в песочнице jsfiddle.net/dHkvK. Если я копирую этот код себе, то вкладки также горизонтально.
Может быть я что-то не так делаю? Или в bootstrap3 убрали такую возможность? Смотрел документацию на русском вот здесь: mybootstrap.ru/components/#navs.

Вопрос задан более трёх лет назад
176 просмотров

4 комментария

Подписаться 1 Оценить 4 комментария

Владислав Лысков @Vlatqa Куратор тега HTML

свой код кидай

Написано более трёх лет назад

Роман Фридман @VeRe777 Автор вопроса

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Contact Manager</title>

    <link href="libs/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="tabbable  tabs-left">
  <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"> <a href="#foodTab" data-toggle="tab">
    Food</a>
    </li>
    <li class=""> <a href="#toyTab" data-toggle="tab">
    Toy</a>
    </li>
    <li class=""> <a href="#clothesTab" data-toggle="tab">
    Clothes</a>
    </li>
    <li class=""> <a href="#booksTab" data-toggle="tab">
    Book</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="foodTab">Oh my god it's the food tab!</div>
    <div class="tab-pane fade" id="toyTab">Toy tab!</div>
    <div class="tab-pane fade" id="clothesTab">clothing tab</div>
    <div class="tab-pane fade" id="booksTab">books books books</div>
  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="libs/js/jquery-3.2.0.min.js"></script>
    <script src="libs/js/common.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="libs/js/bootstrap.min.js"></script>
  </body>
</html>

Написано более трёх лет назад

Роман Фридман @VeRe777 Автор вопроса

Вот мой html-код, вкладки работают, переключаются, но они горизонтальные, опят же. Должны отображаться слева.

Написано более трёх лет назад
Владислав Лысков @Vlatqa Куратор тега HTML

Роман Фридман: отключи свой main.css и посмотри что будет, видимо какие-то стили берутся из него

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 8 часов назад
- 32 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 1 подписчик
- 8 часов назад
- 40 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 10 часов назад
- 16 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 13 часов назад
- 285 просмотров
0

ответов
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 16 часов назад
- 72 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как совместить JS и Django?
- 1 подписчик
- вчера
- 88 просмотров
1

ответ
JavaScript

Сложный
Как сделать горизонтальный виртуальный скролл?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему падает локальный сервер?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Разработать нейросеть

02 мая 2024, в 06:11

30000 руб./за проект

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

7000 руб./за проект

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

5000 руб./за проект

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Contact Manager</title> <link href="libs/css/bootstrap.min.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet">    </head> <body> <div class="tabbable tabs-left"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"> <a href="#foodTab" data-toggle="tab"> Food</a> </li> <li class=""> <a href="#toyTab" data-toggle="tab"> Toy</a> </li> <li class=""> <a href="#clothesTab" data-toggle="tab"> Clothes</a> </li> <li class=""> <a href="#booksTab" data-toggle="tab"> Book</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="foodTab">Oh my god it's the food tab!</div> <div class="tab-pane fade" id="toyTab">Toy tab!</div> <div class="tab-pane fade" id="clothesTab">clothing tab</div> <div class="tab-pane fade" id="booksTab">books books books</div> </div> </div>  <script src="libs/js/jquery-3.2.0.min.js"></script> <script src="libs/js/common.js"></script>  <script src="libs/js/bootstrap.min.js"></script> </body> </html>
Вот мой html-код, вкладки работают, переключаются, но они горизонтальные, опят же. Должны отображаться слева.
Роман Фридман: отключи свой main.css и посмотри что будет, видимо какие-то стили берутся из него

Answer 1 · 2017-04-01 12:57:20

iBird Rose @iiiBird Куратор тега HTML

Пока ты спишь - твой конкурент совершенствуется

в бутсрап 3 такого нет. можешь сам стилизовать www.bootply.com/74926

Ответ написан более трёх лет назад

Комментировать

Почему вкладки не отображаются слева?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт