Inconvenience with bootstrap columns

0

I have a footer made from the bootstrap navigation bar, the thing is that I'm trying to locate certain columns within rows that are also columns of a main row.

Here's the codepen

They will see a div orange and another celestial one. If you shrink the screen until you reach 767px, the celestial div is off the side and overlaps the orange div.

I have no idea why it happens, but the funny thing is that 767px is the same screen width as the togglebutton (The three-bar button that minimizes a navigation bar) has its effect.

Then I need the orange div to not lose its position when the screen width is less than 767px.

Why does this happen? How do I fix it?

    
asked by Roberto Sepúlveda Bravo 14.05.2017 в 08:47
source

1 answer

2

Your block tool1, has a class col-xs-2, this is active in sizes less than 768, since you only put the value of 2 (col-xs-2) ... it becomes very small and the hidden from his side

<div id="tool1" class="col-xs-2 col-sm-4 col-md-4 col-lg-4">hey</div>

You can try something like the following

<div id="tool1" class="col-xs-5 col-sm-4 col-md-4 col-lg-4">hey</div>
    
answered by 14.05.2017 / 09:05
source