Заголовки в сетке Bootstrap

@Dmitry54321 · Регистрация: 23.09.2016

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

Добрый день. Заметил, что почти на всех сайтах с сеткой bootstrap заголовки секций не вносятся в столбцы сетки(Как на картинке заголовок "Настройка рекламы"). Структура строится по типу:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section id="name">
  <div class="container">
   <div class="row">
    <h1>Настройка рекламы</h1>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
    <div class="col-lg-3">
     //Content
    </div>
   </div>
  </div>
</section>

Почему заголовки не вносятся, допустим, в col-lg-12? Неясность вызывает еще и то, что на каких-то страницах заголовки таки вносят в столбцы, но на большинстве — нет.
И появился еще один вопрос: нужно ли таким заголовкам присваивать класс, чтобы потом через него задавать им свойства или работать через ".name h1{}" ?

@mrtoxas · 13.11.2016, 13:05

Всегда надо исходить из конкретной ситуации. И каждому действию должно быть объяснение. Вот вы можете объяснить зачем вы хотите вложить заголовок в col-lg-12?
Насчет классов, да, заголовку можно присваивать класс, но рекомендуется переопределить стили для всех заголовков изначально и постараться в дальнейшем не менять их.

@Dmitry54321 · 13.11.2016, 13:29 **[ТС]**

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

Всегда надо исходить из конкретной ситуации. И каждому действию должно быть объяснение. Вот вы можете объяснить зачем вы хотите вложить заголовок в col-lg-12?

Вот я и не знаю почему так делают(скриншот взят с рандомного сайта, подходящего под мою проблему).
Первая мысль — для адаптивности. Как будет вести себя такой заголовок на маленьких экранах без занесения в столбцы? Если с ним все будет нормально, то зачем некоторые верстальщики заносят такие заголовки в столбцы?
Меня интересует, что является общепринятым в данной ситуации, когда надо просто сверстать заголовок. Что является самым оптимальным вариантом в таких ситуациях, чтобы потом не было сложностей ни у меня, ни у программистов?

Добавлено через 7 минут

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

Насчет классов, да, заголовку можно присваивать класс, но рекомендуется переопределить стили для всех заголовков изначально и постараться в дальнейшем не менять их.

Но что делать, если на разных секциях страницы заголовки находятся на разной высоте или даже на разных местах по горизонтали? Может стоит их обернуть в div и уже от него делать margin, а не от самого внешнего тега секции?
Тот же вопрос для span:

HTML5
1
2
3
4
5
6
7
8
<section id="name">
  <div class="container">
   <div class="row">
       <span class="phone">Телефон:24312414</span>
       <span class="adress">Наш адрес: г. Москва...</span>
   </div>
  </div>
</section>

Если в маленькой секции по середине расположены в одну строку только адрес и телефон фирмы, надо ли их заносить в колонки? И если да, надо ли дополнительно оборачивать в div, дабы не пришлось указывать свойства через .section span{} ?

@mrtoxas · 13.11.2016, 13:52

Первая мысль у вас правильная. Но опять таки - выходим из ситуации. Если вам надо, чтобы заголовок при определенной ширине экрана занимал определенное количество колонок, тогда вносим его колонки. Если заголовок, например, всегда будет по центру и при изменении ширины экрана просто будет переносится на другую строку, как обычный строковый элемент, тогда нет причин вкладывать его в колонки.
Насчет стилей для заголовков, я имел в виду размеры, шрифт. Если вам надо как-то его позиционировать, тогда в этом нет проблем, в этом плане заголовок ничем не отличается от других элементов.

Добавлено через 8 минут
Просто вопрос для себя надо ставить не "надо ли", а "имеет ли смысл". И тогда будет больше ясности

@Dmitry54321 · 13.11.2016, 14:10 **[ТС]**

Спасибо, теперь понял. Раньше думал, что заголовки заносятся тоже, поскольку на сайте bootstrap написано, что наследниками row могут быть только столбцы.

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	13.11.2016, 13:05
	Всегда надо исходить из конкретной ситуации. И каждому действию должно быть объяснение. Вот вы можете объяснить зачем вы хотите вложить заголовок в col-lg-12? Насчет классов, да, заголовку можно присваивать класс, но рекомендуется переопределить стили для всех заголовков изначально и постараться в дальнейшем не менять их. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	13.11.2016, 13:52
	Сообщение было отмечено Dmitry54321 как решение Решение Первая мысль у вас правильная. Но опять таки - выходим из ситуации. Если вам надо, чтобы заголовок при определенной ширине экрана занимал определенное количество колонок, тогда вносим его колонки. Если заголовок, например, всегда будет по центру и при изменении ширины экрана просто будет переносится на другую строку, как обычный строковый элемент, тогда нет причин вкладывать его в колонки. Насчет стилей для заголовков, я имел в виду размеры, шрифт. Если вам надо как-то его позиционировать, тогда в этом нет проблем, в этом плане заголовок ничем не отличается от других элементов. Добавлено через 8 минут Просто вопрос для себя надо ставить не "надо ли", а "имеет ли смысл". И тогда будет больше ясности 1

@Dmitry54321 0 / 0 / 0 Регистрация: 23.09.2016 Сообщений: 30
	13.11.2016, 14:10 [ТС]
	Спасибо, теперь понял. Раньше думал, что заголовки заносятся тоже, поскольку на сайте bootstrap написано, что наследниками row могут быть только столбцы. 0

Заголовки в сетке Bootstrap

Решение