I have a problem that when using the Twitter Bootstrap Grid system the elements contained in the grid are wrapped around the end of the row, although the width of all the contained elements together is 100%.
Illustration here:
http://www.bootply.com/KEm1U4bDVP
I tried to find for margins and paddings already but couldn’t find any element that makes up that extra space to cause the wraparound.
Instead of using “30%” width for the last button I could use a value like 29%, but that is against my will. since the little extra spacing is becoming less and less when the screen width decreases.
How can I make the buttons to stay on one row and not be wrapped?
3
Answers
You have to use the grid-system correctly
Buttons are inline-block elements. You have two options:
Floated elements: http://www.bootply.com/drrFPKsDPY
Or comment the spaces: http://www.bootply.com/RMoQw95WpJ
You can set the width using
calc
see fiddle: https://jsfiddle.net/eye4ytq2/1/