Bootstrap最小宽度网格
使用twitter引导使用流体行设置我有
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
我想要的是让第一个div（span4类）的最小宽度为275px而不会影响第二个div的布局。 我已经尝试添加min-width: 275px但这使得第二个div移动到下一行。 有没有办法正确地做到这一点？
<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/（获取代码）
我也有类似的问题。 我尝试用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将移动到下一行。 因为＃320px的#text宽度不能再放开。 所以#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属性不是不完整的。 所以计算误差更大。
引导列是弹性项目。 当其他人达到他们的最小宽度时，你必须决定一列应该缩小。 这可以防止元素移动到下一行。
这是一个非常漂亮的codepen：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。 调整最大宽度到正常范围的数量，我们有8 100/12 * 8 = 66.66％
链接地址: http://www.djcxy.com/p/88315.html