Bootstrap minimum width grid

Question

Using twitter bootstrap using a fluid row setup I have

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

What I want is to give the first div (with class span4) a minimum width of 275px without upsetting the layout of the second. I've tried just adding min-width: 275px but that makes the second div move to the next line. Is there a way to do this properly?

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

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.