#StackBounty: #jquery #css #twitter-bootstrap #twitter-bootstrap-3 How can I keep a row of a button and text from wrapping using multic…

Bounty: 50

I have a series of rows consisting of a button and text, like so:

[Button] [Text]
[Button] [Text]
[Button] [Text]
...

When I apply the multicol class, they eventually wrap around, like so:

[Button] [Text]   [Button] [Text]
[Button] [Text]   ....

Unfortunately, in many cases, the button or the text gets broken in half when going into the next column. Using “display: inline-block” makes my buttons and text vary in size on different screen resolutions, and makes them spaced strangely.

What is the best way to keep the [Button] [Text] combination from breaking in the column, while keeping each [Button] [Text] combination equally spaced, and looking the same?

<

div class=”snippet”>

<

div class=”snippet-code”>

.multicol {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}
  <!-- Imagine 20-25 of these in a row -->
  
(VARYING-LENGTH DESCRIPTIONS HERE)
</div> </div>