Prevent columns from wrapping in bootstrap

Question

Similar to this question Bootstrap 3 - grid with fixed wrapper - Prevent columns from stacking up I need to prevent my bootstrap columns from wrapping.

The issue I have however is that I need it to persist the not wrapping if more than 12 columns. As even with col-xs once you've got 12 columns, the thirteenth will wrap - as seen in this example bootply http://www.bootply.com/n5KdXfK7gZ#

If you look at the HTML from my bootply pictured below - I want the fourth column (spare .col-4) to stay on the same row as the first 12 columns.

<div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">spare .col-4</div>
  </div>
  <hr>
</div>

I need my additional columns to continue on the same row as the first 12. I don't mind if they scroll off the visible viewport creating a scroll bar, but I do not want them to wrap.

This is so that I can have a slide in / out animation, similar to bootstrap uis carousel, accept that I cannot use carousel, as I need it to behave completely differently when in deskop mode.

I hope this makes sense :)

Solution

LinKeCodes Hi there.
To have 13 columns and to not have any drop down to a new row when resized.

Just divide the view width of the screen by 13, and create your own class of col-13.
You would need to write some css like this...

.col-13 {
    width: calc((100vw / 13 ) - 1vw); 
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    float: left;
}

Here is a working Fiddle for you to look at.

Hope this can help to get you on the right track here.

ADDED TO THIS
Here is an updated Fiddle using overflow-x: scroll; to help do what you want to add but hide the 13th block.