Съежает блок Bootstrap (Wordpress)

@Rafeen · Регистрация: 14.07.2018

Студворк — интернет-сервис помощи студентам

Доброго времени суток,

Проблема Bootstrap 3(аналогично и на Bootstrap 4):

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php get_header(); ?>
<div class="container">
    <div class="row">
        <div class="content col-8">
            <?php get_template_part('inc/page-title'); ?>
                <?php while ( have_posts() ): the_post(); ?>
                    <article <?php post_class('group'); ?>>
                        <?php get_template_part('inc/page-image'); ?>
                        <?php the_content(); ?>
                    </article>
                <?php if ( ot_get_option('page-comments') == 'on' ) { comments_template('/comments.php',true); } ?>
            <?php endwhile; ?>
                </div>
                <div class="content col-4">
            <?php get_sidebar(); ?>
        </div></div></div>
<?php get_footer(); ?>

Проблема вот в чём, колонка col-4 съезжает вниз, под col-8, хотя col-4 по идее должен быть справа от col-8.
Все div закрыты, а в подключенных файлах удалены.

CSS
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@font-face {
    font-family: 'Folio';
    src: url('fonts/folio.eot');
    src: url('fonts/folio.svg') format('svg'),
         url('fonts/folio.eot?#iefix') format('embedded-opentype'),
         url('fonts/folio.woff') format('woff'),
         url('fonts/folio.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
body {
    background-attachment: fixed;   
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;   
    background-size: cover;
    font-family: Tahoma;
    font-size: 17px;
    word-wrap: break-word;
}
a {
    color: #DB0011;
    line-height: 1.5em;
    text-decoration: none;
}
a:hover {
    color: #FF1414;
    text-decoration: underline;
}
.header {
    background-color: #000;
    color: #fff;
    padding: 10px;
    position: relative;
    width: 100%;
}
.footer {
    background-color: #000;
    bottom: 0;
    color: #fff;
    padding: 10px;
    position: relative;
    width: 100%;
}
.stranitsa {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}
.content {
    background-color: #fff;
    position: relative;
    width: 100%;
}
.block {
    background-color: #000;
    color: #fff;
    font-family: 'Folio';
    font-size: 30px;
    padding: 3px;
    text-align: center;
    text-transform: uppercase;
}
.otstup {
    padding: 15px;
}
.player {
    
}
@media (min-width: 1200px) {
    .rightside {
        width: 350px;
    }
}
.folio-black,#folio-black {
    color: #000;
    font-family: 'Folio';
    font-size: 30px;
    text-transform: uppercase;
}
.folio-white,#folio-white {
    color: #fff;
    font-family: 'Folio';
    font-size: 30px;
    text-transform: uppercase;
}

@GRO_UA · 14.07.2018, 14:03

Ссылку на сие произведение можно увидеть?

@Rafeen · 14.07.2018, 14:06 **[ТС]**

Пожалуйста, http://monetv.ru

@Freeze_Breeze · 14.07.2018, 14:07

Rafeen, а средства разработчика что показывают?

@Freeze_Breeze · 14.07.2018, 14:13

Rafeen, ну так что тут не понятного? У Вас col-4 не в контейнере и не в ряду, вот бутстрап его и опустил в низ так как контейнер у вас заканчивается перед открытием col-4, что не ясно?

@GRO_UA · 14.07.2018, 14:13

Сообщение от Rafeen

Пожалуйста, http://monetv.ru

Я не увидел что бы что-то поехало куда-то, поясните

@Freeze_Breeze · 14.07.2018, 14:15

Сообщение от Rafeen

Проблема Bootstrap 3(аналогично и на Bootstrap 4):

Эти два фреймворка используют разные классы.

@Freeze_Breeze · 14.07.2018, 14:18

Rafeen, Аналогичный пример: https://codepen.io/Freeze_Breeze/pen/YjybQq

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="row">
        <div class="col-8">
            <div class="foo"></div>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="foo1"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
.foo {
    height: 50px;
    background-color: #ff21ff;
}
 
.foo1 {
    height: 60px;
    background-color: #ff99ff;
}

@Rafeen · 14.07.2018, 14:18 **[ТС]**

Как-раз таки в контейнере. Но при просмотре в браузере, он съезжает

@Freeze_Breeze · 14.07.2018, 14:19

Rafeen, Значит php что то не так генерирует, что на выходе получаем вот такую вот непонятную ситуацию

@Rafeen · 14.07.2018, 14:20 **[ТС]**

Поясняю, сайдбар (сol-4) должен быть справа, но почему-то при просмотре в браузере, он съезжает вниз под col-8.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php get_header(); ?>
<div class="container">
    <div class="row">
        <div class="content col-8">
            <?php get_template_part('inc/page-title'); ?>
                <?php while ( have_posts() ): the_post(); ?>
                    <article <?php post_class('group'); ?>>
                        <?php get_template_part('inc/page-image'); ?>
                        <?php the_content(); ?>
                    </article>
                <?php if ( ot_get_option('page-comments') == 'on' ) { comments_template('/comments.php',true); } ?>
            <?php endwhile; ?>
                </div>
                <div class="content col-4">
            <?php get_sidebar(); ?>
        </div></div></div>
<?php get_footer(); ?>

@GRO_UA · 14.07.2018, 14:28

Сообщение от Rafeen

Поясняю, сайдбар (сol-4) должен быть справа, но почему-то при просмотре в браузере, он съезжает вниз под col-8.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php get_header(); ?>
<div class="container">
    <div class="row">
        <div class="content col-8">
            <?php get_template_part('inc/page-title'); ?>
                <?php while ( have_posts() ): the_post(); ?>
                    <article <?php post_class('group'); ?>>
                        <?php get_template_part('inc/page-image'); ?>
                        <?php the_content(); ?>
                    </article>
                <?php if ( ot_get_option('page-comments') == 'on' ) { comments_template('/comments.php',true); } ?>
            <?php endwhile; ?>
                </div>
                <div class="content col-4">
            <?php get_sidebar(); ?>
        </div></div></div>
<?php get_footer(); ?>

Да я уже понял, теперь.
У Вас класс col в бустрапе не отображает инспектор.
т.е скорее всего Вы его потерли.

Добавлено через 4 минуты
Подключите новый файл bootstrap.css Вашей версии с офф. сайта и будет счастье.

@Rafeen · 14.07.2018, 14:34 **[ТС]**

Увы, не сработало

@Fedor92 · 14.07.2018, 14:48

Rafeen, Вам уже ответили, что в вёрстке ошибка... Элемент с классом col-4 находится вне контейнера с классом row - это видно наглядно в инспекторе... К тому же классы col-4 и col-8 появились в бутсрап 4, а у Вас подключен бутстрап 3... Ясен пень они не будут фунциклировать априори... Приведите вёрстку в порядок и определитесь с версией бутстрап, а потом эксперименты ставьте...

@GRO_UA · 14.07.2018, 15:12

Сообщение от Rafeen

Увы, не сработало

Почему не сработало, сработало.
col появился.
Попробуйте поменять местами.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php get_header(); ?>
<div class="container">
    <div class="row">
          <div class="content col-4">
            <?php get_sidebar(); ?>
        </div>
        <div class="content col-8">
            <?php get_template_part('inc/page-title'); ?>
                <?php while ( have_posts() ): the_post(); ?>
                    <article <?php post_class('group'); ?>>
                        <?php get_template_part('inc/page-image'); ?>
                        <?php the_content(); ?>
                    </article>
                <?php if ( ot_get_option('page-comments') == 'on' ) { comments_template('/comments.php',true); } ?>
            <?php endwhile; ?>
                </div></div></div>
<?php get_footer(); ?>

@Rafeen · 14.07.2018, 15:34 **[ТС]**

GRO UA, поменял местами — работает, но сайдбар нужен справа, а не слева, от контента

@GRO_UA · 14.07.2018, 19:33

Сообщение от Rafeen

GRO UA, поменял местами — работает, но сайдбар нужен справа, а не слева, от контента

Это в админке WP

@Raqwp · 14.07.2018, 20:03

Сообщение от Rafeen

поменял местами — работает, но сайдбар нужен справа, а не слева, от контента

Сообщение от GRO_UA

Это в админке WP

C чего это в админке? Просто поменять местами col-4 с col-8
или http://bootstrap-4.ru/docs/4.1... reordering

@GRO_UA · 14.07.2018, 20:17

Сообщение от Raqwp

C чего это в админке? Просто поменять местами col-4 с col-8
или http://bootstrap-4.ru/docs/4.1... reordering

Либо так, да)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@GRO_UA 10 / 9 / 9 Регистрация: 04.07.2018 Сообщений: 70
	14.07.2018, 14:03
	Ссылку на сие произведение можно увидеть? 0

@Rafeen 0 / 0 / 0 Регистрация: 14.07.2018 Сообщений: 6
	14.07.2018, 14:06 [ТС]
	Пожалуйста, http://monetv.ru 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	14.07.2018, 14:07
	Rafeen, а средства разработчика что показывают? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	14.07.2018, 14:13
	Rafeen, ну так что тут не понятного? У Вас col-4 не в контейнере и не в ряду, вот бутстрап его и опустил в низ так как контейнер у вас заканчивается перед открытием col-4, что не ясно? Миниатюры 0

@Rafeen 0 / 0 / 0 Регистрация: 14.07.2018 Сообщений: 6
	14.07.2018, 14:18 [ТС]
	Как-раз таки в контейнере. Но при просмотре в браузере, он съезжает Миниатюры 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	14.07.2018, 14:19
	Rafeen, Значит php что то не так генерирует, что на выходе получаем вот такую вот непонятную ситуацию 0

@Rafeen 0 / 0 / 0 Регистрация: 14.07.2018 Сообщений: 6
	14.07.2018, 14:34 [ТС]
	Увы, не сработало 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.07.2018, 14:48
	Rafeen, Вам уже ответили, что в вёрстке ошибка... Элемент с классом col-4 находится вне контейнера с классом row - это видно наглядно в инспекторе... К тому же классы col-4 и col-8 появились в бутсрап 4, а у Вас подключен бутстрап 3... Ясен пень они не будут фунциклировать априори... Приведите вёрстку в порядок и определитесь с версией бутстрап, а потом эксперименты ставьте... 0

@Rafeen 0 / 0 / 0 Регистрация: 14.07.2018 Сообщений: 6
	14.07.2018, 15:34 [ТС]
	GRO UA, поменял местами — работает, но сайдбар нужен справа, а не слева, от контента 0