<p dir="auto">I have a simple panel with four button groups in a fluid grid system, but they keep detaching one from another when I try to scale down the parent. Is there any way of fixing this?<br>
EDIT: Basically what I want is the groups to stay together. <del>And also there is another bug with this, that is if I have a button with icon only, it gets smaller that the button with text and/or icon. In the fiddle there is no such a bug i.e. it doesn't show up IDK why. Notice on the picture my quick little dirty way of fixing it with a dot after the OK glyph. Here is a picture of that: <a href="http://i.imgur.com/MelvudM.png" rel="nofollow">http://i.imgur.com/MelvudM.png</a></del></p>
<p dir="auto">Fiddle: <a href="http://jsfiddle.net/Jy7e6/3/" rel="nofollow">http://jsfiddle.net/Jy7e6/3/</a></p>
<p dir="auto">I am not sure if it should be fixed or not. If I use grouped action buttons in a <code class="notranslate">&lt;td&gt;</code> without specified width it will look like in example above.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/bc8ce0008533168cd6308e78ab077468e361698ea57d6050ac5dc98f95adf8bd/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3538393835312f3939343231352f32363032643036612d303961392d313165332d383939622d3461303262666635363761392e706e67"><img src="https://camo.githubusercontent.com/bc8ce0008533168cd6308e78ab077468e361698ea57d6050ac5dc98f95adf8bd/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3538393835312f3939343231352f32363032643036612d303961392d313165332d383939622d3461303262666635363761392e706e67" alt="untitled" data-canonical-src="https://f.cloud.github.com/assets/589851/994215/2602d06a-09a9-11e3-899b-4a02bff567a9.png" style="max-width: 100%;"></a></p>
<p dir="auto">Tried to apply <code class="notranslate">white-space: nowrap</code> or removing a space between <code class="notranslate">&lt;button&gt;</code> tags but it didn't help.</p>