Bootstrap minimum width grid

Answer 1

<div class="row-fluid">
    <div class="span4" style="min-width: 275px">...</div>
    <div class="span8">...</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Worked for me. It moves the second div to the new line only if the second div has less then ~66% of screen space.

http://jsfiddle.net/daniilr/DAw6p/embedded/result/ (get the code)

Answer 2

Bootstrap columns are flex items. You have to decide on one column which should shrink when the others have reached their min-width. This prevents elements moving to the next line.

here is a pretty codepen i made: https://codepen.io/timar/pen/VQWmQq/

In this case, we take the other span, reduce it to span1. Give it flex-grow and we have to overwrite bootstraps max-width property.

<div class="row-fluid">
    <div class="span4 style="min-width: 275px;">...</div>
    <div class="span1 style=" flex-grow: 1; max-width:100%; "">...</div>
</div>

to be on the safe side you can reduce the second span only as much as necessary. i.e span6 . Adjust the max-width to the amount the normal span had, we had span8 100/12*8 = 66.66%

Answer 3

I have similar issue, too. And I try solve this problem with css and bootstrap. But I can't find a solution. So I solved this problem with jQuery.

My Situation

<div id="text" class="col-sm-3 col-sm-offset-2" style="min-width: 320px"></div>
<div id="image" class="col-sm-7" ></div>

When window width is narrow, then #image will move to next line. Because #text width can not be loosed anymore from 320px. So #image can not occupy its width, and have to move next line.

How I Solved It

Calculate #image width each window size. And CSS is not proper for this work. So I should use jQuery.

$(window).ready(function() {
    resizeImageWidth();
});

$(document).ready(function() {
    $(window).resize(function() {
        resizeImageWidth();
    });
});

var resizeImageWidth = function() {
    var text_minwidth = parseInt($('#text').css('width'));
    var text_marginLeft = parseInt($('#text').css('margin-left'));
    var image_marginLeft = parseInt($('#image').css('margin-left'));

    if ($(window).width() > 768) {
        var image_width = $(window).width() - (text_marginLeft + text_minwidth + image_marginLeft + 32);
        $('#image').width(image_width);
        console.log(image_width);
    } else {
        $('#image').width('');
    }
}

resizeImageWidth function will get #text width, margin-left, #image margin-left and more thing. Of course it can not fit your code. I should subtract these things. Please check what I have subtracted.

After render div can still move to next line. Maybe some elements is missing. So I subtract 30px hardly. But this calculating still have error. So div can move next line in some window width. So I should subtract a further 2px to prevent it. Ideally I should make more exact calculations.

In small display, this calculating did not be needed. So if ($(window).width() > 768) is needed. And this function should load in $(window).ready. If you load in $(document).ready, then CSS property is not incomplete. So calculating error is bigger.