Bootstrap, правильно-ли сделал верстку блоков?

Question

[Михаил Р.]

Всем привет! Сделал разметку блоков, но вопрос в "правильности" такой конструкции, ибо других вариантов придумать и нагуглить не получилось.
Задача: есть 2 колонки с информацией, левая колонка должна иметь максимальную (не фикс) ширину, контент колонки прижат к левой стороне. Ширина правой колонки изначально не известна, ширина ее должна быть не более ширины контента внутри нее, контент колонки прижат к правой стороне.
Что получилось у меня:
HTMl:

<div class="container-fluid bgBack">
<div class="container content noPadding">
<div class="row">
<div class="leftColumn container-fluid noPadding">текст</div>
<div class="rightColumn container-fluid noPadding">текст</div>
</div>
</div>
</div>
</div>

CSS:

.leftColumn {margin-left: 0;}
.rightColumn {margin-right: 0;}

Answer 1

[Emptyform]

Читайте:
getbootstrap.com/css/#grid-offsetting

Comments

[Михаил Р.]

капитан очевидность?

[Emptyform]

Mike Ro: мистер халявщик?

Answer 2

[Дмитрий Еремин]

Объявили строку, супер.

<div class="container-fluid bgBack">
<div class="container content noPadding">
<div class="row">
...
</div>
</div>
</div>

Теперь нужно создать в ней колонки.
Внутрь .row пишем:

<div class="col-md-6">левая колонка</div>
<div class="col-md-6">правая колонка</div>

Я так понял, вам нужно создать две колонки в строке.

Более подробно, действительно, читайте тут: getbootstrap.com/css/#grid-offsetting

Comments

[Михаил Р.]

я пока изучаю верстку, поэтому пару глупых вопросов:
col-md-4 - у нас-же левая колонка не с фикс.шириной...
col-md-offset-4 - погуглил, но особо не понял, что значит "offset"?

[Дмитрий Еремин]

Mike Ro:

(1) - col-md-4. Ширина не фикс. Она занимает 4/12 строки. col-md-3 займет 3/12 строки, col-md-6 - 6/12 и т.д. Если ширина окна будет меняться, ширина поля тоже будет, но отношение 4/12 сохранится. Подробно (getbootstrap.com/css/#grid-example-basic)

(2) - col-md-offset-4 будет сделан отступ в 4/12. Пример:

<div class="col-md-4">левая колонка</div>
<div class="col-md-4 col-md-offset-4">правая колонка</div>

в результате получим строчку, в которой 4/12 занимает блок "левая колонка". Потом пробел такой же ширины, потом блок такой же ширины "правая колонка"

[Дмитрий Еремин]

пример про offset - getbootstrap.com/css/#grid-offsetting

[Михаил Р.]

Дмитрий Еремин: в том и дело, что ширина контента правой колонки изначально не известна, а левая должна растягиваться на максимальную ширину не вытесняя правую колонку...

[Михаил Р.]

Дмитрий Еремин: обновил вопрос, сделал более понятным вроде...

[Дмитрий Еремин]

Mike Ro:

<div class="container-fluid">
<div class="row">
  <div class="col-xs-3">left</div>
  <div class="container-fluid">right</div>
</div>
</div>

На вскидку, как-то так. Еще про media queries почитайте

[Михаил Р.]

Дмитрий Еремин: не работает, сносит правую колонку на вторую строку...
да, про media queries знаю...

[Дмитрий Еремин]

Mike Ro: пусть умелые верстальщики закидают меня камнями, но, на скорую руку, я бы пошел старым добрым путем

<table class="table">
  <tr>
  <td style="width: 100%;">left</td>
  <td>right</td>
  </tr>
  </table>

В ячейки помещаем контейнеры с нашим контентом

[Михаил Р.]

Дмитрий Еремин: не, таблица это конечно не вариант =) нашел способ

Answer 3

[Глеб Кемарский]

UPD: Бутстрап предполагает иерархию "контейнер > ряд > столбцы". Правильной будет такая вёрстка:

<div class="container">
  <div class="row">
    <div class="rightColumn">текст справа</div>
    <div class="leftColumn">текст слева</div>
  </div>
</div>

.leftColumn { 
  overflow: hidden;
}
.rightColumn {
  float: right;
  text-align: right;
}

Демо решения: https://jsfiddle.net/glebkema/um8r9buL/

Comments

[Глеб Кемарский]

Mike Ro Удалось сделать, что нужно? Чем помочь?