Как вывести колонки в bootstrap?

Question

[sabanovvv]

Есть сайт шириной 1200px.
Задача: вывести 3 колонки на всю ширину экрана
делаю так:

<div class="row">
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
</div>

выводятся 3 горизонтальные колонки на ширину экрана 970px
что я делаю не так?

Comments

[Иван]

ссылку дайте

Answer 1

[Flaker]

Нужно все обернуть в блок .container-fluid.
Все родительские элементы блока .container-fluid должны быть width: 100%

Если делаешь с макета, то проверь, возможно имеется что-то типа элемента .wrapper, который ограничен по ширине. Его надо сделать width: 100%.

Answer 2

[yttrium]

row надо класть в container или в container-fluid
grid

Comments

[sabanovvv]

сделал вот так, все равно также получается

[yttrium]

@sabanovvv а если сделать вот так?

[sabanovvv]

<div class="container">
<div class="row">
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
</div>
</div>

не помогает

[yttrium]

а бутсрап подключен?

[sabanovvv]

да

Answer 3

[Юрий Лобанов]

Есть сайт шириной 1200px.
Задача: вывести 3 колонки на всю ширину экрана

Что, меня одного смущает тот факт, что две фразы противоречат друг другу?
Автор, прочитайте документацию.

Comments

[yttrium]

"выводятся 3 горизонтальные колонки на ширину экрана 970px"
они по ширине недоходят до 1200px (:

[Юрий Лобанов]

@yttrium я так понимаю, что это результат такой получается у автора, но хочет-то он именно три на ширину экрана, при том, что сайт у него фиксированной ширины в 1200.

Answer 4

[Володимир Годяк]

<div class="container">
        <div class="row">
            <div class="col-lg-4">col-1</div>
            <div class="col-lg-4">col-2</div>
            <div class="col-lg-4">col-3</div>
        </div><!-- .container-->
    </div><!-- .row-->

Answer 5

[Olexandr Dmukhovskiy]

Здравствуйте.
Сложность в том что Бустрап не имеет блока шириной

Есть сайт шириной 1200px.

Потому Вам нужен свой блок

<div class="w1200">
 <div class="row">
  <div class="col-lg-4">col-1</div>
  <div class="col-lg-4">col-2</div>
  <div class="col-lg-4">col-3</div>
 </div>
</div>

.w1200{
width:1200px;
margin:0 auto;
}

Comments

[yttrium]

а вот хардкодить широту совсем плохо.. бутстрап как раз призван сделать адаптацию для всевозможных вариантов экранов.. а этот вариант снизит его гибкость, попросту сломает её.