Почему не сдвигается картинка в Бутстрапе?

@mardeeva_m · Регистрация: 02.10.2016

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

Здравствуйте! Подскажите пожалуйста, почему не сдвигается картинка на предполагаемые 2 колонки? Где я ошиблась?
Прикладываю код и скриншот.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <section id="header">
        <div class="container">
            <div class="row">
                <div class="col-md-1 logo">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="col-md-5 col-md-offset-2 menu">
                    <img src="img/logo.png" alt="">
                </div>
            </div>
        </div>
    </section>

Qwerty_Wasd · 08.11.2017, 21:24

mardeeva_m, Вот здесь

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

на предполагаемые 2 колонки

Code
1
col-md-offset-2

сдвинет вправо на размер

Code
1
col-md-2

.
Плюс тот код что вы привели не отражает сути проблемы. Если использовать его в песочнице на чистом клиенте, код работает как ему положено. =>Песочница<=
К нему явно не хватает куска CSS.

@mardeeva_m · 09.11.2017, 09:20 **[ТС]**

Мне и нужно,чтобы картинка сдвинулась на 2 ячейки вправо. Но она не сдвигается. Вот и не пойму, где я ошиблась.

Добавлено через 1 минуту
Вот у Вас в коде картинка двигается, а у меня нет.

@SergioSup · 09.11.2017, 14:01

попробуйте .offset-md-2 вместо col-md-offset-2

@Freeze_Breeze · 09.11.2017, 15:22

mardeeva_m, все правильно Вы писали, только вместо col-md-1 нужно было написать col-md-7. Потому, что класс .row реагирует на 12 колонок. Подробнее прочитайте -->тут<--

@mardeeva_m · 09.11.2017, 15:40 **[ТС]**

Не пойму, почему col-md-7. У меня логотип занимает чуть больше,чем один столбец. Я в него и поместила логотип.
Мне же нужно,чтобы было 1 столбец, пропускаем 2 столбца и потом 5 столбцов под меню.

@Freeze_Breeze · 09.11.2017, 16:58

mardeeva_m, потому, что Bootstrap`у нужно, что бы в ряду .row было 12 колонок, у вас всего лишь шесть и две колонки пропускаем, итого 8 колонок. Соответственно вам нужно добавить еще четыре колонки. Еще раз кидаю ссылку ENG, RUS. В общей сумме у вас должно выходить 12 колонок, а у вас только 8, следовательно вам нужно добавить еще 4 колонки.

@mardeeva_m · 09.11.2017, 17:07 **[ТС]**

Попробую сделать, как Вы говорите, но вот пример из той ссылки, которую Вы высылали. И там меньше колонок в сумме с оффсетами, но все работает.

HTML5
1
2
3
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Взято с этого сайта. http://bootstrap-3.ru/css.php#grid-offsetting

@Freeze_Breeze · 09.11.2017, 17:56

mardeeva_m, тут все по феншую, все колонки учитываются. Даже col-md-offset-3 считаются как колонки (которых нет). Просто ты их отключаешь. А так они есть.

@Freeze_Breeze · 09.11.2017, 18:00

А в вашем примере

CSS
1
2
3
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

bootstrap ставит по центру блок col-md-6 с шестью колонками по центру, а с лева и права делает отступы по три колонки col-md-offset-3 вот вам и 12 колонок.

@SergioSup · 09.11.2017, 20:14

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

а с лева и права делает отступы по три колонки

отступ там только слева и col-md-6 по центру только потому, что отступ в три колонки получился с такой же шириной как и расстояние справа.
можно же посмотреть какие именно стили задают эти классы.

@mardeeva_m · 10.11.2017, 10:20 **[ТС]**

Вы меня запутали. Я понимаю, что всего 12 колонок в Бутстрапе. Но в примере

HTML5
1
2
3
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

в коде прописаны 9 колонок( 6 + 3 офсет),а не все 12 и работает. А вот в моем коде

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<section id="header">
        <div class="container">
            <div class="row">
                <div class="col-md-1 logo">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="col-md-5 col-md-offset-2 menu">
                    <img src="img/logo.png" alt="">
                </div>
            </div>
        </div>
    </section>

также прописаны 8 колонок, а не все 12 и должно работать, как в примере с сайта Бутстрап. Не пойму, почему не работает и что должно быть написано, чтобы работало, как положено.

@shvyrevvg · 10.11.2017, 11:09

mardeeva_m, css показывайте.

@Freeze_Breeze · 10.11.2017, 11:16

mardeeva_m, Вы совсем не читаете что вам пишут.
https://www.youtube.com/watch?... Bq&index=2
https://www.youtube.com/watch?... THsU9T2mBq
https://www.youtube.com/watch?v=-A5LxeKi3Aw
https://www.youtube.com/watch?v=EgMIr5gc-sI

@SergioSup · 10.11.2017, 20:06

.offset-md-2 это не помогло?

@mardeeva_m · 13.11.2017, 11:03 **[ТС]**

Нет, не помогло. Буду смотреть видео, ссылки на которые мне бросили.

@Freeze_Breeze · 13.11.2017, 11:28

mardeeva_m, я сразу не заметил, НО! ЗАПОМНИТЕ!!! Ни при каких условиях не добавляйте классам bootstrap свои классы, а именно <div class="col-md-5 col-md-offset-2 menu"> и <div class="col-md-1 logo">. Таким образом Вы меняете сетку бутстрап из за чего она может ломаться и не правильно отображать содержимое. Лучше всего создайте еще один div в нутри класса col-md-1 со своими правилами.

HTML5
1
2
3
4
5
6
7
8
<div class="container">
  <div class="row" style="background-color: #f09837;">
    <div class="col-md-1" style="background-color: #555; height: 67px;"></div>
    <div class="col-md-5 col-md-offset-2" style="background-color: #777;">
      <img src="img/logo.png" alt="logo" style="background-color: #e35d01;">
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
img[alt="logo"] {
    width: 150px;
    height: auto;
}

@mardeeva_m · 13.11.2017, 21:06 **[ТС]**

Спасибо! Делала как у Вас, не получается все равно! Прикладываю скриншот и код. Причем сделала еще раз так, как советовали выше (.offset-md-2), заработало, а вот как у Вас, не получается.

Вот так работает

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Артем Исламов</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
    <section id="header">
    <div class="container">
        <div class="row" style="background-color: red;">
            <div class="col-md-1" style="background-color: blue; height: 67px;">
                <img src="img/logo.png" alt="">
            </div>
            <div class="col-md-5 offset-md-2" style="background-color: orange;">
                <img src="img/logo.png" alt="">
            </div>
        </div>
    </div>
    </section>
 
 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;;
 
 
img{
    width: 150px;
    height: auto;
}

А вот так нет

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<section id="header">
    <div class="container">
        <div class="row" style="background-color: red;">
            <div class="col-md-1" style="background-color: blue; height: 67px;">
                <img src="img/logo.png" alt="">
            </div>
            <div class="col-md-5 col-md-offset-2" style="background-color: orange;">
                <img src="img/logo.png" alt="">
            </div>
        </div>
    </div>
    </section>

CSS
1
2
3
4
5
6
7
8
9
10
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;;
 
 
img{
    width: 150px;
    height: auto;
}

Скрин 2 - работает, скрин 3 - не работает!

@SergioSup · 13.11.2017, 21:11

в bootstrap3 col-md-offset-...
в bootstrap4 offset-md-...

@Freeze_Breeze · 13.11.2017, 21:31

mardeeva_m, драсте приехали, а ничего, что Вы используете классы библиотеки bootstrap третей версии, а подключаете четвертую версию...
Удачи

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	09.11.2017, 09:20 [ТС]
	Мне и нужно,чтобы картинка сдвинулась на 2 ячейки вправо. Но она не сдвигается. Вот и не пойму, где я ошиблась. Добавлено через 1 минуту Вот у Вас в коде картинка двигается, а у меня нет. 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	09.11.2017, 14:01
	попробуйте `.offset-md-2` вместо `col-md-offset-2` 1

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.11.2017, 15:22
	mardeeva_m, все правильно Вы писали, только вместо `col-md-1` нужно было написать `col-md-7`. Потому, что класс `.row` реагирует на 12 колонок. Подробнее прочитайте -->тут<-- 1

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	09.11.2017, 15:40 [ТС]
	Не пойму, почему col-md-7. У меня логотип занимает чуть больше,чем один столбец. Я в него и поместила логотип. Мне же нужно,чтобы было 1 столбец, пропускаем 2 столбца и потом 5 столбцов под меню. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.11.2017, 16:58
	mardeeva_m, потому, что Bootstrap`у нужно, что бы в ряду `.row` было 12 колонок, у вас всего лишь шесть и две колонки пропускаем, итого 8 колонок. Соответственно вам нужно добавить еще четыре колонки. Еще раз кидаю ссылку ENG, RUS. В общей сумме у вас должно выходить 12 колонок, а у вас только 8, следовательно вам нужно добавить еще 4 колонки. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.11.2017, 17:56
	mardeeva_m, тут все по феншую, все колонки учитываются. Даже `col-md-offset-3` считаются как колонки (которых нет). Просто ты их отключаешь. А так они есть. Миниатюры 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	10.11.2017, 11:09
	mardeeva_m, css показывайте. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	10.11.2017, 11:16
	mardeeva_m, Вы совсем не читаете что вам пишут. https://www.youtube.com/watch?... Bq&index=2 https://www.youtube.com/watch?... THsU9T2mBq https://www.youtube.com/watch?v=-A5LxeKi3Aw https://www.youtube.com/watch?v=EgMIr5gc-sI 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	10.11.2017, 20:06
	`.offset-md-2` это не помогло? 0

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	13.11.2017, 11:03 [ТС]
	Нет, не помогло. Буду смотреть видео, ссылки на которые мне бросили. 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	13.11.2017, 21:11
	в bootstrap3 `col-md-offset-...` в bootstrap4 `offset-md-...` 1

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	13.11.2017, 21:31
	mardeeva_m, драсте приехали, а ничего, что Вы используете классы библиотеки bootstrap третей версии, а подключаете четвертую версию... Удачи 1