Why use container inside navbar's in Bootstrap?

Navigation
2

I was learning to use Bootstrap's Navbar, and a question came to me. All the examples I found of using navbar, have just after the same a container. It's more or less like this: 

<div class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Lalala, também tem só o container, sem o -fluid -->
  </div>
</div>

Would someone explain me what to put? I can understand even using class="container" , but class="container-fluid" does not. Would not it be better just not to container-fluid ? What is the advantage of using a container inside a navbar?

    
asked by anonymous 17.05.2016 / 05:03

1 answer

4
  Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

In Portuguese:

  

Rows should be placed inside a .container (fixed width) or .container-fluid (full width) for a suitable alignment and padding value.

This is more related as a guide to good practice. If you look closely at the code css of bootstrap , you will notice that there is a whole work behind the grid system, where we have the container (or container-fluid) hierarchy > row > col-x-nn .

Note: Remembering that there is no need to follow this concept strictly, but for ideal behavior, it is recommended.

To mount a grid system correctly, we must use them in this order since:

  • container will create a margin
  • The row element has a negative margin, to give the feel of an element full-width
  • Finally, the col-x-nn element has a padding , to avoid getting everything "crushed"

In addition, container keeps content centralized.

So why use container in other areas?

To maintain the harmony of the site. Imagine that for each section of the site you create a section with a specific margin. When doing maintenance or need adjusting this margin, you would have to look at all the sections and adjust them individually. With container everything is standardized and organized in the same place.

It also serves as a good practice guide to other areas.

Breakpoints

Furthermore, container has width setting based on its breakpoints or "breakpoints" (value in which the layout changes based on the width of the screen being used. etc). This is so that it has the behavior of never getting too small (on large screens) and maintaining the ratio on all devices, whether they are cell , tablets or computers .

Real example

Some time ago that happened to me, so I do not know if it still happens or if it has already been updated. But there was a time when a custom element that I added to nav-bar was played to the bottom line after having toggle of the menu enabled. This problem was solved when I re-used .container (I removed it because I did not find it necessary). This happened because he created the proper grouping for the elements.

    
17.05.2016 / 13:43
form_validation Codeigniter using GET DropDownListFor how to use?