Bootstrap minimum width grid

Answer 1

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

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.