some content her...">
Clever Geek Handbook

Why is Bootstrap pushing the last column on the next row

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>

I want my nested string to have layout [1] [4] [7] on a 320x480 device. However, when I resize to 350 width the last column jumps to the next line below the date. I want the text to be to the right of the date, not below the date (at 320x480). If I change the width of the last column to 6 it works fine. What is causing this? Since 1 + 4 + 7 = 12, I expected this to work.

+3


source to share


1 answer


You will have to override shims of this size.

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

But your layout has 15px left / right padding on the pillar.



So even if the column is supposed to be 26.6 pixels, it stays at at least 30 pixels because of the spacers. This means that the rest of the columns cannot fit in the remaining space, and the last one breaks.

Working backs having 15 pixel spacers means the minimum column width is 30 pixels. This means that the minimum layout width of 12 columns is 360 pixels.

+4


source






More articles:


All Articles