Как выровнять col-md-2 в row в Bootstrap 3?

Question

[dk-web]

Доброго времени суток!
Вроде бы познал bootstrap - но возник вопрос по сетке.

<div class="jumbotron">
		<div class="container-fluid">
			<div class="row">
                     <div class="col-md-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
                   <div class="col-md-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
           </div>
        </div>        
    </div>

Код сократил, боксов, допустим 4.
Как "недозаполнить" row, выровняв это все дело по центру? Про класс offset знаю, но он, по идее, применим, если у тебя один div в ряду... а как быть, если несколько? Можно конечно слева и справа hidden бокс сделать, но это туповато...

Конечная задача - в ряду использовать несколько "боксов" небольшой ширины, не растягивая их на всю длину row.

Answer 1

[dk-web]

Собственно все решилось весьма просто...
к классу container добавил класс container-narrow с шириной 60%
и выставил col-md-3

Answer 2

[CapeRatel]

<div class="jumbotron">
    <div class="container-fluid">
      <div class="row">
                     <div class="col-md-2 col-md-offset-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
                   <div class="col-md-2 col-md-offset-4">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
           </div>
        </div>        
    </div>

Comments

[dk-web]

Спасибо, но видимо и правда код надо полностью давать... боксов 4..

col-md-2
col-md-2
col-md-2
col-md-2

я пробовал и по 1 добавлять... но имхо с контейнером или row что-то делать нужно...

[CapeRatel]

dk-web: Есть же offset. Что в нем плохого?

[CapeRatel]

CapeRatel: обьясните в чем мое решение плохое?

[dk-web]

CapeRatel: Оно отличное, но работает для двух боксов.. а у меня их 4) и не могу подобрать эти оффсеты корректно...

[CapeRatel]

dk-web: возможно нужно кастомизировать каждый бокс. Прописать ему margin: auto и обернуть каждый в оберку под col-md-3

[CapeRatel]

dk-web: второй вариант посадить это на flex-box но это плохо для кроссбраузерности и не в курсе как он в бутстрапе ведет себя. Я стараюсь не верстать под продакшен на бутстрапе и аналогов. Много хлама в нем не нужного.

[dk-web]

CapeRatel: так в том то и дело... просто делаю для себя некий "набор" под быстрое решение... есть конечно куча готовых шаблонов, но хочется свое..
спасибо энивей

[CapeRatel]

dk-web: я бы посоветовал взять готовую сетку на 24. И на основе ее писать свой фрейм.
fluid24.org вроде вот этой. Всего хорошего.