Why is Bootstrap pushing last column on next line

Question

I have the following HTML

<div class="container">
    <div class="row">
        some content here
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-1"></div>
                <div class="col-xs-4 col-md-2">17:00-18:00</div>
                <div class="col-xs-7 col-md-9">
                    <a href="#">Some looooooooooooooooooooooooooooooooooong Text goes here</a>
                </div>
            </div>
            <!-- more rows like this follow -->
        </div>  
    </div>
</div>

What I want is that my nested row has a [1][4][7] layout on 320x480 device. However when I resize to about 350 width the last column goes on the next line below the date. I want the text to be on the right side of the date and not below the date (at 320x480). If I change the width of the last column to 6 it works fine. What is the reason for this? Since 1+4+7=12 I expected this to work as well.

Answer 1

You will have to override the paddings at that size.

The problem is that one column is 8.333% of the total width (when using 12 columns). At 320 pixels that means 26.6 pixels each column.

But your layout has 15pixels of left/right padding per column.

So even if the column should be 26.6 pixels it remains at its minimum of 30 pixels due to the paddings. That means that the rest of the columns cannot fit at the remaining space and the last one breaks..

---

Working backawards from that, having 15 pixel paddings means that the minimum column width is 30 pixels. That means that the minumum width of a 12 column layout is 360pixels.