css - 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/（获取代码）

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

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

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

在这种情况下，我们取另一个跨度，将其减少到 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 。将最大宽度调整为正常跨度的数量，我们有 span8 100/12*8 = 66.66%