Css 自举最小宽度网格

使用TwitterBootstrap使用流体行设置

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

...
...

我想给第一个div（类span4）一个最小宽度275px，而不破坏第二个div的布局。我尝试添加

minwidth:275px

，但这会使第二个div移动到下一行。有没有办法正确执行此操作？

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

...
...
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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

---

我也有类似的问题。我尝试用css和引导解决这个问题。但我找不到解决办法。所以我用jQuery解决了这个问题

我的处境

resizeImageWidth

函数将获得

#文本

宽度、左边距、

#图像

左边距等内容。当然，它不适合你的代码。我应该减去这些东西。请检查我减去了什么

渲染后，div仍可以移动到下一行。也许有些元素不见了。所以我几乎不需要减去30px。但这种计算仍然存在误差。因此

div

可以在一些

窗口中移动下一行。所以我应该再减去一个2px来防止它。理想情况下，我应该做更精确的计算

在小型显示器中，不需要进行这种计算。因此需要
if（$（window）.width（）>768）
。此函数应加载到
$（窗口）.ready
。如果加载
$（document）.ready
，则CSS属性不是不完整的。因此计算误差较大
 引导列是弹性项。您必须决定在其他列达到其最小宽度时应收缩的列。这样可以防止图元移动到下一行

这是我做的一支漂亮的密码笔：

在这种情况下，我们取另一个跨度，将其减小为跨度1。给它flex grow，我们必须覆盖引导最大宽度属性

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


是的，当我将屏幕移动到较小的尺寸时（但仍有足够的空间容纳第二个div），这就是导致问题的原因。在这个（）示例中，div只有在屏幕面积小于66%时才会移动到新行。你还期待着另一种行为吗？@Danil:我在这里也在寻找同样的行为。事实上，我希望左边和右边的275px永远不要向下移动。有什么明显的方法可以做到这一点吗？@Ronnie Kilsbo overflow:auto+不要在任何地方使用百分比宽度help@Daniil我在两列上都有
overflow:auto
，并且我设置的唯一宽度（使用spanX属性除外）位于左列上，最小宽度为250px
。尽管如此，当窗口水平向下调整时，第二列（右）在第一列（左）下方弹出。如果我删除左栏上的
minwidth:250px
，右栏将停留在它应该位于的位置，并随窗口调整大小。有没有一种方法可以强迫正确的列保留下来，不管怎样？如果CSS本身就足够了，那么这种方法就太长太复杂了。Bootstrap 5中没有“行流体”，使用这个自定义类可以很容易地限制列的大小：
。limited width{max width:30rem！important；}
。这是针对非常旧的Bootstrap。我想现在它只是
行
检查这里以获得新的答案。
$(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('');
    }
}

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