Dan Tappin Dan Tappin - 2 years ago 111
CSS Question

Bootstrap split dropdown wraps in table heading

I have a split Bootstrap dropdown that I am wrapping in a form and adding to a table heading. The issue is that when you narrow the screen size the dropdown toggle element wraps. At first I assumed it was the form wrap but I think its the table heading.

enter image description hereenter image description here

Here is a http://www.bootply.com/zzRJxiYy80 for an example with live code.



MINOR UPDATE (More details on comments from answer)

In my case I am using the outline buttons. I have Ransack sort links in each button and filters in the dropdown. The second 'Major Category' one has a slightly wider line than the rest and at this point I am making way too much of a big deal of it. Minor stuff like that drives me nuts but I need to let it go :)

This one is at -0.45em

enter image description here

I played with this and settled on -0.37em

enter image description here

Answer Source

I would suggest overriding Bootstrap's use of float:left for keeping these .btn elements on the same line, and instead use display:inline-block for that. Then, you can use white-space:nowrap to prevent them from breaking to multiple lines when space becomes limited.

Most of the styles you need (display:inline-block and white-space:nowrap) are actually already defined in Bootstrap's CSS - you just need a couple more styles to use them to your advantage:

.btn-group.nowrap > .btn{
.btn-group.nowrap > .btn:not(:first-child){
    margin-left: -0.4em; /* To deal with whitespace between inline-block elements */

Here's an updated Bootply to demonstrate. Hope this helps! Let me know if you have any questions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download