2

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 :)

Community
  • 1
  • 1
LinKeCodes
  • 77
  • 1
  • 1
  • 9
  • Yes, it is in my example bootply. I will edit the post to add it directly there too ..... – LinKeCodes Sep 29 '15 at 13:27
  • 1
    Shouldn't it be `col-xs-3`? since `bootstrap` divides screen into 12 pieces of equal `width` when you assign `col-xs-4` there can be 3 Columns of length `4` which will be equal to `12`. From the link to question you provided, if you see that guy's question, he is maintaining `col-xs-4` for 3 elements not 4. Check **[this Bootply](http://www.bootply.com/n5KdXfK7gZ)** with `col-xs-3` – Guruprasad J Rao Sep 29 '15 at 14:10

1 Answers1

8

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.

enter image description 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.

enter image description here

AngularJR
  • 2,752
  • 2
  • 16
  • 19
  • Hi AngularJR, that's kind of what i'm after.. however I don't really want the columns to resize so small.. I would rather that 12 still fit the viewport - and the 13th was 'off screen' whilst staying on the same 'row' rather than wrapping. – LinKeCodes Sep 29 '15 at 14:34
  • Hi, If 1 col is to be off screen, then this is not really responsive to fit screen sizes. You can use a or some media breakpoints with the `col-13` and say at a md screen size change the width value to break around half to a new row. let us know if you need help with breakpoints. – AngularJR Sep 29 '15 at 14:46
  • thanks for your help so far - I really appreciate it!, I am familiar with media break points. It is responsive, because in desktop mode i'm happy for the 13th column to wrap ( i do use media breakpoints already to try to get this affect only when in 'mobile' mode ) - I need when in mobile mode for my columns not to wrap - this is so that I can slide the 13th column into view using an animation much the way a carousel works - so it needs to stay in line with all of the other columns - just off screen. – LinKeCodes Sep 29 '15 at 14:59
  • Take a look at my post above for the update. It has a scroll area hide to the 13th block to the right, without having the window width show a wider page. – AngularJR Sep 29 '15 at 16:31
  • thanks for the help I now have a solution :). The final fiddle didn't work for me.. however with all of the comments plus your original fiddle - I now have a solution based off your advice :) Here is my final fiddle - behaves as normal bootstrap 'desktop mode' however when using a smaller screen ( max width 796 ) it stops wrapping the columns. https://jsfiddle.net/LinKeCodes/kauwjcjj/7 – LinKeCodes Sep 30 '15 at 09:53
  • Hi there, Ok I see that you have this like you wanted now, well done. With the **inner** div that scrolls, you might try a fixed px width, that way the col-xx-xx will stay widther and not shrink when on very small screens. So that the info within can be easily read/seen. Great that you have it working now. – AngularJR Sep 30 '15 at 10:10
  • Use CSS box in the Fiddle to put the CSS instead of Style... will that work ? – N.K May 16 '16 at 07:21