Bootstrap 最小宽度网格

Question

使用 twitter bootstrap 使用我拥有的流动行设置

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

我想要的是给第一个 div（类 span4）一个 275px 的最小宽度，而不会打乱第二个的布局。我试过只添加 min-width: 275px 但这会使第二个 div 移到下一行。有没有办法正确地做到这一点？

Answer 1

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

为我工作。只有当第二个 div 的屏幕空间小于 ~66% 时，它才会将第二个 div 移动到新行。

http://jsfiddle.net/daniilr/DAw6p/embedded/result/ (get the code)

Answer 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 宽度不能再从 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 宽度、左侧边距、#image 左侧边距等等。当然它不适合你的代码。我应该减去这些东西。请检查我减去了什么。

渲染后div 仍然可以移动到下一行。也许缺少一些元素。所以我几乎不减去30px。但是这个计算还是有误差的。所以div 可以在window 宽度中移动下一行。所以我应该再减去一个 2px 来防止它。理想情况下，我应该进行更精确的计算。

在小显示中，不需要这种计算。所以需要if ($(window).width() > 768)。这个函数应该在$(window).ready 中加载。如果在$(document).ready 中加载，则 CSS 属性不完整。所以计算误差更大。

Answer 3

引导列是弹性项目。您必须决定一列在其他列达到最小宽度时应该缩小。这可以防止元素移动到下一行。

这是我制作的漂亮代码笔：https://codepen.io/timar/pen/VQWmQq/

在这种情况下，我们采用另一个跨度，将其缩减为跨度1。给它 flex-grow，我们必须覆盖 bootstraps 的 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 。将最大宽度调整为正常跨度的数量，我们有 span8 100/12*8 = 66.66%