Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.94/18: Рейтинг темы: голосов - 18, средняя оценка - 4.94
1 / 1 / 1
Регистрация: 27.10.2017
Сообщений: 8
1

Bootstrap 4. Не работают стили стандартных блоков, неправильно распологаются эти блоки

21.08.2018, 16:07. Показов 3599. Ответов 2
Метки нет (Все метки)

Осваиваю написание сайтов при помощи Gulp. Собрал сборку, подключил Bootstrap 4. Вроде все работает, но как-то криво, не так как указано в документации(приложу картинки)
Вот основной код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/libs.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="navbar">
        <a class="navbar-brand" href="#">Логотип</a>
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
         <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
 
    <script src="js/libs.min.js"></script>
    <script src="js/common.min.js"></script>
</body>
</html>
В libs.min.сss собираются следующие файлы:

@import url(../libs/slick-carousel/slick/slick.css);
@import url(../libs/slick-carousel/slick/slick-theme.css);
@import url(../libs/bootstrap/dist/css/bootstrap.min.css);
@import url(../libs/tether/dist/css/tether.min.css);

В libs.min.js

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = function() {
    $.gulp.task('scripts', function() {
        return $.gulp.src([
            'app/libs/jquery/dist/jquery.min.js',
            'app/libs/slick-carousel/slick/slick.min.js',
            'app/libs/jquery-migrate/jquery-migrate.min.js',
            'app/js/main.js',
            'app/libs/bootstrap/dist/js/bootstrap.min.js',
            'app/libs/tether/dist/js/tether.min.js'
        ])
        .pipe($.gp.concat('libs.min.js'))
        .pipe($.gp.uglifyjs())
        .pipe($.gulp.dest('app/js'))
})
}
common.min.js пока ничего не содержит.

Может я че не так подключил, или недоподключил, я хз, но на первой картинке то как у меня, а на второй то как должно быть
Миниатюры
Bootstrap 4. Не работают стили стандартных блоков, неправильно распологаются эти блоки   Bootstrap 4. Не работают стили стандартных блоков, неправильно распологаются эти блоки  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.08.2018, 16:07
Ответы с готовыми решениями:

Компоненты для поля крестики нолики, распологаются неправильно
Кручу верчу, так и сяк пробовал, но чета поле создать для крестиков ноликов не могу. Хочется...

Разбить строку на блоки, а затем эти блоки на отдельные слова
...доброго времени суток, уважаемые форумчане! Возникла задача - разбить строку на блоки, а затем...

Новые стили не применяются, удалил все стили а они все равно работают
Всем здравствуйте. У меня катастрофа!!! Мозг уже разплавился! Вообщем что случилось: Вчера решил...

Стили в bootstrap
Доброго времени суток! Хотел спросить, может кто то сталкивался уже с такой проблемой с которой...

2
Эксперт HTML/CSS
1485 / 1233 / 517
Регистрация: 07.08.2016
Сообщений: 3,188
21.08.2018, 16:36 2
Цитата Сообщение от Python 3 Посмотреть сообщение
Может я че не так подключил, или недоподключил
Как вы думаете, код примера на сайте бутстрапа для чего выложен? Для красоты, просто так, или что бы сайт круче выглядел?
1
1 / 1 / 1
Регистрация: 27.10.2017
Сообщений: 8
24.08.2018, 08:45  [ТС] 3
Блин, точно, забыл. Надо было подключить в правильном порядке jquery, popper и bootstrap
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.08.2018, 08:45

Неправильно работает цикл for, и функции работают неправильно
1) Неправильно работает цикл for(k=0...). Входит только 1 раз, дальше вылетает. Делал пошаговую...

Блоки bootstrap
Добрый день. Подскажите как реализовать такую штуку(скрин). У одного блока класс md-8 у второго...

Не устанавливаются стили в сетке bootstrap
&lt;style&gt; .fon div {background-color: red;} &lt;/style&gt; &lt;header&gt; &lt;div class=&quot;container&quot;&gt;...

Bootstrap переопределяет мои стили
как правильно сделать, чтоб bootstrap мои стили не переопределял на сайте? &lt;link...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru