Сетка минимальной ширины Bootstrap

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

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

Ответ 2 · рейтинг 1 · Penguin

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

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

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

Ответ 3 · рейтинг -1 · Timar Ivo Batis

Столбцы Bootstrap являются гибкими элементами. Вы должны выбрать один столбец, который должен уменьшиться, когда другие достигнут своей минимальной ширины. Это предотвращает перемещение элементов на следующую строку.

вот красивый код, который я сделал: https://codepen.io/timar/pen/VQWmQq/

В этом случае мы берем другой span, уменьшаем его до span1. Дайте ему flex-grow, и мы должны перезаписать свойство max-width начальной загрузки.

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

чтобы быть в безопасности, вы можете уменьшить второй пролет только настолько, насколько это необходимо. то есть span6 . Отрегулируйте max-width до значения, которое было у обычного диапазона, у нас было span8 100/12 * 8 = 66,66%