Блоки bootstrap: Система сеток. Разметка · Bootstrap. Версия v4.0.0

Leave a Comment / Разное / By /

html — Как в Bootstrap 4 изменить ширину блоков col-*?

Вопрос задан

Изменён 5 лет 1 месяц назад

Просмотрен 6k раза

Как в Bootstrap 4 изменить ширину блоков col-*?

  • html
  • css
  • вёрстка
  • bootstrap
  • sass

Есть несколько возможных вариантов, зависит от конкретной задачи:

  1. Можно менять ширину колонок в стандартной сборке бустрапа меняя постфиксы в классах колонок от 1 до 12, в зависимости от выбранной ширины экрана.
.foo {
  display: block;
  height: 50px;
  background: purple;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap. min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div>
  <div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
</div>

<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-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  1. Вы можете сами создать свою колонку, нужной вам ширины, например ширина 25%, которой нет в бутстрапе. Добавьте класс .col и для нужного класса пропишите свой процент на все ширины:
.foo {
  display: block;
  height: 50px;
  background: purple;
}

.col-25 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

@media (min-width: 576px) {
  .col-sm-25 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) {
  .col-md-25 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 992px) {
  .col-lg-25 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 1200px) {
  .col-xl-25 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap. min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div>
  <div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
    </div>
  </div>
</div>

<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-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  1. Вы можете кастомизировать свою сборку под собственные нужды используя переменные sass. В файле _variables.scss переменные, изменив которые собрать свою тему со своей сеткой.

$grid-columns: 12 !default;

Например заменить на любое требуемое вам количество, допустим 100:

$grid-columns: 100;

И тогда у вас появятся колонки с ширинами на все размеры брейкпоинтов от 0 до 100. Вы сможете например создать колонку шириной 95%, или 13%, любое целое число от 0 до 100, можно попасть почти в любой макет!

  1. В третьем бутстрапе есть собственный кастомизатор прямо на сайте, можно ввести аргументы и скачать свою версию. В 4 вы это можете сделать сами вручную, как в примере выше.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Вопрос по настройке bootstrap блоков

Вопрос задан

Изменён 6 лет 2 месяца назад

Просмотрен 90 раз

Здравствуйте.

Помогите пожалуйста. Я хочу, чтобы у меня было еще два блока, но с правой стороны. Там, где я отметил черной линией. Чтобы разделялось справа так же, как и слева. Я прописал свойства для правой стороны, а почему-то не разделилось. Не могу понять. Хочу, чтобы у ряда был блок col-md 3 ; col-md-6, col-md-3 . Слева, посередине, справа. И таких хотя бы два ряда. Но не получается. Подскажите пожалуйста.

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/

* {
  margin: 0;
  padding: 0;
}
.head-block,
.top-menu,
.top-material,
.left-sidebar,
.right-sidebar,
.content {
  background: #ccc;
  margin-bottom: 1px;
}
/*ВЫСОТА ШАПКИ*/

.head-block {
  height: 150px;
}
/*ВЫСОТА МЕНЮ*/

.top-menu {
  height: 30px;
}
/*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/

.top-material {
  height: 200px;
}
/*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/

.left-sidebar,
.content {
  height: 300px;
}
.
  right-sidebar,
.content {
  height: 300px;
}
/*ГРАНИЦА У КОНТЕНТА*/

.content {
  border-left: 1px solid #fff;
}
.top-menu {
  background: #daf2fe;
}
.top-menu ul {
  padding-left: 0;
  margin-bottom: 0;
}
.top-menu li {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Главная</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="css/dopstyle.css" rel="stylesheet" media="screen">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src=".
 
 ./../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <div>
    <div>
      <div></div>
      <div>
        <ul>
          <li><a href="#">Главная</a>
          </li>
          <li><a href="#">Услуги</a>
          </li>
          <li><a href="#">О нас</a>
          </li>
          <li><a href="#">Контакты</a>
          </li>

        </ul>
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

</body>

</html>
  • bootstrap

У Вас присутствуют блоки справа, Вы не видите разделения из-за невидимой границы. Для отображения границы Вам нужно добавить

border-right: 1px solid #fff; для блока .content в строке 43 приведенного Вами css, т.е.:

.content {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

Результат:

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/

* {
  margin: 0;
  padding: 0;
}
.head-block,
.top-menu,
.top-material,
.left-sidebar,
.right-sidebar,
.content {
  background: #ccc;
  margin-bottom: 1px;
}
/*ВЫСОТА ШАПКИ*/

.head-block {
  height: 150px;
}
/*ВЫСОТА МЕНЮ*/

.top-menu {
  height: 30px;
}
/*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/

.top-material {
  height: 200px;
}
/*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/

.left-sidebar,
.content {
  height: 300px;
}
.right-sidebar,
.content {
  height: 300px;
}
/*ГРАНИЦА У КОНТЕНТА*/

. content {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.top-menu {
  background: #daf2fe;
}
.top-menu ul {
  padding-left: 0;
  margin-bottom: 0;
}
.top-menu li {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">

<div>
  <div>
    <div></div>
    <div>
      <ul>
        <li><a href="#">Главная</a>
        </li>
        <li><a href="#">Услуги</a>
        </li>
        <li><a href="#">О нас</a>
        </li>
        <li><a href="#">Контакты</a>
        </li>

      </ul>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

с учетом col-md от 992px для корректного отображения результата Вам нужно воспользоваться опцией fiddle развернуть фрагмент

5

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Блоки Discover Bootstrap для WP Editor и Gutenberg

Выпущена версия 2!

Вместе!

Редактор WordPress (Gutenberg) представляет удобный и красивый способ легкого создания страниц и сообщений в WordPress. Это делает повседневную работу каждого пользователя WordPress намного проще и понятнее .

Но добиться безупречной работы редактора WordPress (Gutenberg) с Bootstrap непросто. Мы думаем, что должно быть. Вот почему мы разработали блоки Bootstrap для WP Editor. Это позволяет вашему сайту WordPress использовать контейнер Bootstrap, блоки строк и столбцов в редакторе WP (Gutenberg).

Скачать бесплатно

Представляем:


Bootstrap Blocks

для WP Editor

Плагин Bootstrap Blocks теперь позволяет каждому сайту WordPress использовать WP Editor (Gutenberg) вместе с сеткой Bootstrap. В редакторе WP вы теперь просто вставляете известные элементы сетки начальной загрузки, такие как контейнеры, строки и столбцы , в которых затем вы можете использовать свои любимые блоки редактора WP.

В довершение ко всему, вы можете установить распределение столбцов по точкам останова . Таким образом, вы в один миг создадите адаптивную страницу с помощью редактора WP.

Используйте его для

Хотите ли вы настроить полный сайт Bootstrap WordPress или просто хотите быстро настроить временную страницу .

Плагин Bootstrap Blocks позволяет использовать активированную тему WordPress. Но вы также можете начать без верхнего и нижнего колонтитула и начать с новой страницы. Без шапки и футера.

Все зависит от вас.

Характеристики

Бесплатная версия
Дизайн
Упаковка
Использование блоков редактора WP (Gutenberg) в сетке Bootstrap
Вставка контейнеров, строк и столбцов в WP Editor (Gutenberg)
Установить использование столбца для всех контрольных точек Bootstrap
Установить использование столбца для максимум 3 точек останова Bootstrap
Полная интеграция с темами, использующими сетку Bootstrap
Полная интеграция с темами, которые не используют сетку Bootstrap
Использование стандартных классов Bootstrap (например, mx-auto)
Адаптивный разделительный блок (не в пикселях, а в зависимости от размера экрана)
Полный контроль над настройкой желоба
Блокировка макетов контейнеров во избежание непреднамеренных изменений редакторами
Установите общие цвета идентификации и примените их в редакторе WP (Gutenberg)
Свернуть контейнеры и получить четкий обзор в редакторе
Добавление меток к контейнерам для наглядности в редакторе
Начать с пустого шаблона «Загрузочная страница»
Подавить верхний и нижний колонтитулы по умолчанию на страницах шаблона «Bootstrap page»
Опция: перенос заголовка страницы в сетку Bootstrap на страницах шаблона «Bootstrap page»
Опция: скрыть заголовок страницы по умолчанию на страницах шаблона «Страница начальной загрузки»
Опция: включить сетку Bootstrap из панели плагинов
Используйте емкости для жидкости

Скачать бесплатно

Bootstrap Blocks для WordPress Editor — бесплатный плагин amigos на основе встроенной функции Zurb Foundation

демо

демо на plnkr

использование

  1. Установка через Bower, npm, CND или загруженные файлы:

    1. установка беседки --save bootstrap-block-grid
    2. npm install --save bootstrap-block-grid
    3. использовать файлы CDN из jsdelivr
    4. скачать bootstrap-block-grid. zip

  2. Добавить файлы в ваш html

    1. при использовании беседки
    1. при использовании npm
    1. при использовании файлов CDN из jsdelivr
     
      
     
      
     
      
     
      jsdelivr.net/bootstrap.block-grid/latest/bootstrap4-block-grid.min.css" >
    1. при использовании загруженных файлов

  3. Образец разметки

     
      
     
         
     
     
             Content 1 
     
         
     9 0002      
     
             Содержание 2 
     
         

Содержание 3

Содержание 4

Содержание 5

        Содержание 6

    

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

  • xs
    • блок-сетка-xs-1
    • блок-сетка-xs-2
    • .