Bootstrap minimum width grid

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?


<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)


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.


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. ie span6 . Adjust the max-width to the amount the normal span had, we had span8 100/12*8 = 66.66%

链接地址: http://www.djcxy.com/p/88316.html

上一篇: 如何使用LESS使用Twitter Bootstrap创建流体语义布局?

下一篇: Bootstrap最小宽度网格