CSS Bootstrap 最小宽度网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11836131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap minimum width grid
提问by Akshat
Using twitter bootstrap using a fluid row setup I have
使用我有的流体行设置使用 twitter bootstrap
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
What I want is to give the first div (with class span4) a minimum width of 275px without upsetting the layout of the second. I've tried just adding min-width: 275pxbut that makes the second div move to the next line. Is there a way to do this properly?
我想要的是给第一个 div（类 span4）最小宽度为 275px 而不扰乱第二个的布局。我试过只是添加，min-width: 275px但这会使第二个 div 移动到下一行。有没有办法正确地做到这一点？
回答by Daniil Ryzhkov
<div class="row-fluid">
<div class="span4" style="min-width: 275px">...</div>
<div class="span8">...</div>
</div>?????????????????????????????
Worked for me. It moves the second div to the new line only if the second div has less then ~66% of screen space.
为我工作。只有当第二个 div 的屏幕空间小于 ~66% 时，它才会将第二个 div 移动到新行。
http://jsfiddle.net/daniilr/DAw6p/embedded/result/(get the code)
回答by Penguin
I have similar issue, too. And I try solve this problem with css and bootstrap. But I can't find a solution. So I solved this problem with jQuery.
我也有类似的问题。我尝试用 css 和 bootstrap 解决这个问题。但我找不到解决办法。所以我用jQuery解决了这个问题。
My Situation
我的情况
<div id="text" class="col-sm-3 col-sm-offset-2" style="min-width: 320px"></div>
<div id="image" class="col-sm-7" ></div>
When window width is narrow, then #imagewill move to next line. Because #textwidth can not be loosed anymore from 320px. So #imagecan not occupy its width, and have to move next line.
当窗口宽度很窄时，#image则将移动到下一行。因为#text宽度不能从 320px 松散了。所以#image不能占用它的宽度，而不得不移动下一行。
How I Solved It
我是如何解决的
Calculate #imagewidth each window size. And CSS is not proper for this work. So I should use jQuery.
计算#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('');
}
}
resizeImageWidthfunction will get #textwidth, margin-left, #imagemargin-left and more thing. Of course it can not fit your code. I should subtract these things. Please check what I have subtracted.
resizeImageWidth函数将获得#text宽度、左边#image距、左边距等信息。当然它不适合您的代码。我应该减去这些东西。请检查我减去了什么。
After render divcan still move to next line. Maybe some elements is missing. So I subtract 30pxhardly. But this calculating still have error. So divcan move next line in some windowwidth. So I should subtract a further 2pxto prevent it. Ideally I should make more exact calculations.
渲染后div仍然可以移动到下一行。也许缺少某些元素。所以我30px几乎不减。但是这个计算还是有误差的。所以div可以在某个window宽度内移动下一行。所以我应该再减去2px来防止它。理想情况下，我应该进行更精确的计算。
In small display, this calculating did not be needed. So if ($(window).width() > 768)is needed. And this function should load in $(window).ready. If you load in $(document).ready, then CSS property is not incomplete. So calculating error is bigger.
在小显示器中，不需要这种计算。所以if ($(window).width() > 768)是需要的。这个函数应该在$(window).ready. 如果加载 in $(document).ready，则 CSS 属性不完整。所以计算误差较大。
回答by Timar Ivo Batis
Bootstrap columns are flex items. You have to decide on one column which should shrink when the others have reached their min-width. This prevents elements moving to the next line.
Bootstrap 列是弹性项目。您必须决定当其他列达到最小宽度时应缩小的一列。这可以防止元素移动到下一行。
here is a pretty codepen i made: https://codepen.io/timar/pen/VQWmQq/
这是我制作的一个漂亮的代码笔：https://codepen.io/timar/pen/VQWmQq/
In this case, we take the other span, reduce it to span1. Give it flex-grow and we have to overwrite bootstraps max-width property.
在这种情况下，我们取另一个跨度，将其减少到跨度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>
to be on the safe side you can reduce the second span only as much as necessary. i.e span6 . Adjust the max-width to the amount the normal span had, we had span8 100/12*8 = 66.66%
为了安全起见，您可以仅根据需要减少第二个跨度。即span6。将最大宽度调整为正常跨度的量，我们有 span8 100/12*8 = 66.66%
