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

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

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

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


css twitter-bootstrap
person Tarang    schedule 06.08.2012    source источник

Ответы (3)


arrow_upward
11
arrow_downward 

<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/ (получить код)

person Daniil Ryzhkov    schedule 06.08.2012
comment
Да, это тот случай, который вызывает проблему, когда я перемещаю экран на меньший размер (но все еще достаточно места для размещения второго div) - person Tarang; 07.08.2012
comment
div в этом (jsfiddle.net/daniilr/DAw6p/embedded/result) примере переходит на новую строку только тогда, когда занимает менее 66% экрана. Вы ожидаете другого поведения? - person Daniil Ryzhkov; 07.08.2012
comment
@Daniil: Я искал то же самое здесь. На самом деле, я хочу, чтобы 275 пикселей слева и справа никогда не смещались вниз. Есть ли какой-то очевидный способ сделать это? - person Wrench; 04.07.2013
comment
Переполнение @Ronnie Kilsbo: авто + нигде не используйте ширину в процентах, вероятно, поможет - person Daniil Ryzhkov; 05.07.2013
comment
@Daniil У меня есть оба overflow: auto в обоих столбцах, и единственная ширина, которую я установил (кроме использования атрибутов spanX), находится в левом столбце с min-width: 250px. Тем не менее, второй (правый) столбец появляется ниже первого (левого) столбца, когда окно уменьшается по горизонтали. Если я удалю min-width: 250px в левом столбце, правый столбец останется там, где он должен быть, и его размер изменится вместе с окном. Есть ли способ заставить правую колонку остаться, несмотря ни на что? - person Wrench; 05.07.2013

arrow_upward
1
arrow_downward

У меня тоже похожая проблема. И я пытаюсь решить эту проблему с помощью 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 не является неполным. Таким образом, ошибка вычисления больше.

person Penguin    schedule 02.12.2015
comment
Слишком долго и сложно, когда достаточно одного CSS. - person David Spector; 22.04.2021

arrow_upward
-1
arrow_downward

Столбцы 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%

person Timar Ivo Batis    schedule 12.02.2018
comment
В Bootstrap 5 нет жидкости для строк, где легко ограничить размер столбца с помощью этого пользовательского класса: .limited-width {max-width:30rem !important;}. - person David Spector; 22.04.2021
comment
Это для очень старого Bootstrap. Я думаю, теперь это просто row Проверьте здесь, чтобы получить более новый ответ. stackoverflow.com/a/48755273/8385841 - person Timar Ivo Batis; 23.04.2021