Как задать ширину контейнера bootstrap?

Пользователь

от krista , в категории: HTML/CSS , 6 месяцев назад

Как задать ширину контейнера bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от karen.wisozk , 6 месяцев назад

@krista 

Для того чтобы задать ширину контейнера в Bootstrap, нужно использовать классы grid system.


Доступны следующие классы для контейнеров:

  1. .container: Создает контейнер с фиксированной шириной.
  2. .container-fluid: Создает контейнер, который занимает всю ширину родительского элемента.


Примеры использования:


Ширину контейнера можно задать следующим образом:

1
2
3
4
5
6
7
<div class="container"> <!-- Контейнер с фиксированной шириной -->
  <!-- Ваш контент здесь -->
</div>

<div class="container-fluid"> <!-- Контейнер, занимающий всю ширину -->
  <!-- Ваш контент здесь -->
</div>


Также вы можете комбинировать классы для создания контейнеров с разными ширина:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- Контент первой половины контейнера -->
    </div>
    <div class="col-sm-6">
      <!-- Контент второй половины контейнера -->
    </div>
  </div>
</div>


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