Here are two options for the same layout. Look the same but the approach to them is different. Take doubts that some of them are wrong. Question: Which of these options is correct?

# 1:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-12" style="border:1px solid black;">Шапка сайта</div> <div class="col-sm-4" style="border:1px solid black;">Левый блок</div> <div class="col-sm-8" style="border:1px solid black;">Основной блок</div> <div class="clearfix"></div> <div class="col-sm-12" style="border:1px solid black;">Подвал сайта</div> </div> </div>

№2:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-12" style="border:1px solid black;">Шапка сайта</div> </div> <div class="row"> <div class="col-sm-4" style="border:1px solid black;">Левый блок</div> <div class="col-sm-8" style="border:1px solid black;">Основной блок</div> </div> <div class="row"> <div class="col-sm-12" style="border:1px solid black;">Подвал сайта</div> </div> </div>

  • Visually, the second is easier to perceive and less likely to get confused - Artem Gorlachev
  • I may be mistaken, but as a rule, the approach to such problems is purely utilitarian, that is, which is more convenient to use for the desired effect is used. Both purely visually and intuitively, I would use option two as it is more readable - Broouzer King
  • I also reason. but rather authoritative site the first option considers correct. the second is mine. Here I doubt - perfect
  • and what's on an authoritative site is given as an argument? I, for example, generally cannot use constructions like <div class = "clearfix"> </ div> in any conditions - Broouzer King
  • one
    @perfect, yes, the markup is also code. In my head all the same thought that the code is something executable. If I were you, I would have doubted the authority of the resource that you indicated and would have looked like they are doing it here - getbootstrap.com/css/#grid-options - Artem Gorlachev

1 answer 1

Provided that you do not specify a non-zero margin and padding for .row and .col (and you should never specify them, by the way) - outwardly both options will look the same.

Moreover, in the first variant you can even not use the .clearfix block. Because .col-sm-4 and .col-sm-8 will occupy the entire width of the screen, and the next .col , whatever it may be, is guaranteed to be transferred to the next line.

Which option to choose depends on the situation.

The first option is best suited when the contents of the grid is built by you dynamically. For example, when you can take records from the database, and sequentially, in a loop, output them in .col blocks in the layout. Blocks will simply be carried over to the next lines if necessary. Provided that the blocks of one line in the amount will give 12, and provided that the heights of the contents of the columns will be the same.

The second option is best suited when all the blocks in the grid are known to you in advance. Due to .row you protect columns of different lines from each other, readability with this method is higher.

  • 3
    clearfix needed not only for forced transfer, but also so that columns with different heights do not cling to each other . A block in 12 columns cannot be held up by any protrusions, it is clearfix itself. A block of 8 (or less) speakers can catch on. - Gleb Kemarsky