Как правильно использовать row?

Question

[Alexander]

1 Вариант :

<div class="row">
<div class="col-md-7"><input type="text" placeholder="Как вас зовут?"></div>
<div class="col-md-5"><input type="text" placeholder="E-mail"></div>                              
</div>
<div class="row">
<div class="col-md-12"><button>Отправить</button></div>
</div>

2 Вариант

<div class="row">
<div class="col-md-7"><input type="text" placeholder="Как вас зовут?"></div>
<div class="col-md-5"><input type="text" placeholder="E-mail"></div>
<div class="col-md-12"><button>Отправить</button></div>
</div>

Какой вариант правильный ? я склоняюсь к первому.

Answer 1

[sergey]

Первый вариант, в одном .row 12 col (или 24, если сетка такова)

Answer 2

[ixon]

Более корректный вариант первый, но подойдёт и второй. Row это как бы ряд колонок и по идее в одном row должен быть только лишь один ряд колонок, однако, на практике это бывает не столь важно.

Answer 3

[Константин Довнар]

Второй еще лучше тем, что вернувшись через некоторое время к проекту или подключив к нему стороннего человека - будет проще ориентироваться в верстке, не тратя время на понимание где какой ряд.

Comments

[ixon]

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

Answer 4

[De YURII]

Фигня все это, 2 варианта заслуживают внимания, эти два варианта, по своему хороши. Все зависит от ситуации.
igas.com.ua/brands вот пример, можете поиграться с растягиванием.

<div class="row">
                <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2">
            <a href="http://igas.com.ua/brands/6" title="AllEnergo, Олэнерго" class="thumbnail"> 
                <img src="http://igas.com.ua/img/brands/allenergo.png" style="width:160px;" alt="AllEnergo">
            </a>
        </div>
                <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2">
            <a href="http://igas.com.ua/brands/22" title="Amic, Amic Energy" class="thumbnail"> 
                <img src="http://igas.com.ua/img/brands/amic.png" style="width:160px;" alt="Amic">
            </a>
        </div>
                <div class="col-xs-6 col-sm-3 col-md-2 col-lg-2">
            <a href="http://igas.com.ua/brands/16" title="ANP, Альфа-Нафта" class="thumbnail"> 
                <img src="http://igas.com.ua/img/brands/anp.png" style="width:160px;" alt="ANP">
            </a>
        </div>
...

PS: но в данной ситуации более логично использовать перый вариант.