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

Question

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

Web-Kun

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

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

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

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

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 14 часов назад
- 95 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 20 часов назад
- 91 просмотр
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 часа назад
- 79 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 91 просмотр
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- вчера
- 599 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 70 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Написать запросный бот парсер поиска с функцией автоматической записи

24 нояб. 2024, в 15:21

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

Дизайн интерфейса веб-приложения

24 нояб. 2024, в 14:37

3000 руб./в час

Обновить дизайн карты метро Москвы

24 нояб. 2024, в 13:04

500 руб./в час

<!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

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

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

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

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

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

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