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宽度，margin-left，#image margin-left等等。当然它不适合你的代码。我应该减去这些东西。请检查我减去了什么。

渲染后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，我们必须覆盖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％

Bootstrap最小宽度网格

3 个答案:

我的情况

我如何解决它