ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Не старость сама по себе уважается, а прожитая жизнь. Если она была (В. Шукшин).

Системная сетка – горизонтальное выравнивание

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Системная сетка - горизонтальное выравнивание
Давайте посмотрим, простой пример сетки с простым макетом – две колонки, две колонки в параграфах. (Здесь используется стиль для каждого столбца. Вы можете избежать этого.)
 

Это выдаст следующий результат:

Детали

  • <div class = “container”>…</div> элемент добавляется, чтобы обеспечить надлежащее центрирование и максимальную ширину макета.
  • После того, как контейнер будет добавлен, следующее, вы должны подумать в терминах строк. Добавить <div class = “row”>…</div> и столбцы <div class = “col-md-6”></div> внутри строки.
  • Каждая строка в сетке состоит из 12 единиц, и вы можете определить нужный размер ваших колонок с помощью этих устройств. В нашем примере мы имеем две колонки, каждая из 6 блоков шириной т.е. 6 + 6 = 12.

Вы можете попробовать еще несколько вариантов, как – <div class = “col-md-3”></div> и <div class = “col-md-9”></div> или <div class = “col-md-7”></div> и <div class = “col-md-5”></div>

Проведите эксперимент и убедитесь, что сумма всегда должна быть 12.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close