Минимальная ширина сетки загрузки

Используя twitter bootstrap, используя установку строки жидкости, у меня есть

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

Я хочу, чтобы первый div (с классом span4) имел минимальную ширину 275px, не нарушая компоновку второй. Я пробовал просто добавить min-width: 275px, но это делает второй div перемещение в следующую строку. Есть ли способ сделать это правильно?

Ответы

Ответ 1

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

Работал для меня. Он перемещает второй div в новую строку только в том случае, если второй div имеет менее ~ 66% пространства экрана.

http://jsfiddle.net/daniilr/DAw6p/embedded/result/ (получить код)

Ответ 2

У меня тоже подобная проблема. И я пытаюсь решить эту проблему с помощью css и bootstrap. Но я не могу найти решение. Поэтому я решил эту проблему с помощью jQuery.

Мое положение

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

Когда ширина окна узкая, тогда #image переместится на следующую строку. Поскольку ширина #text больше не может быть освобождена от 320 пикселей. Поэтому #image не может занимать свою ширину и перемещать следующую строку.

Как я решил это

Рассчитайте #image ширину каждого размера окна. И CSS не подходит для этой работы. Поэтому я должен использовать 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 функция получит ширину #text, margin-left, #image margin-left и многое другое. Конечно, он не может соответствовать вашему коду. Я должен вычесть эти вещи. Пожалуйста, проверьте, что я вычитал.

После рендеринга div все равно можно перейти к следующей строке. Возможно, некоторые элементы отсутствуют. Поэтому я почти не вычитаю 30px. Но этот расчет по-прежнему имеет ошибку. Таким образом, div может перемещать следующую строку в некоторой ширине window. Поэтому я должен вычесть еще 2px, чтобы предотвратить его. В идеале я должен сделать более точные вычисления.

На маленьком дисплее этот расчет не нужен. Поэтому требуется if ($(window).width() > 768). И эта функция должна загружаться в $(window).ready. Если вы загружаете $(document).ready, то свойство CSS не является неполным. Таким образом, вычисляемая ошибка больше.