twitter-bootstrap 调整引导 div 的大小以适应内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13860191/
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
Resize bootstrap div to fit content
提问by soundswaste
I am using twitter bootstrap to make 2 divs placed side-by-side. Each div has medium and large images inside it, arranged using jquery isotope.
The problem is that when there are not enough images in a div, the div width remains same and there's a lot of extra space left. Like this :
我正在使用 twitter bootstrap 制作 2 个并排放置的 div。每个 div 内部都有中型和大型图像，使用 jquery isotope排列。问题是当一个 div 中没有足够的图像时，div 宽度保持不变，并且还有很多额外的空间。像这样 ：
I want the divs to align centrally and also reduce in width to fit the images inside it. Like this:
我希望 div 居中对齐并减小宽度以适应其中的图像。像这样：
My HTML code is this :
我的 HTML 代码是这样的：
<div id="container" class="container-fluid">
<div class="row-fluid">
<div class="legend span8">Section1</div>
<div class="legend span4">Section2</div>
</div>
<div class="row-fluid">
<div id="section1" class="span8">
<div class="small"><img src="images/1.jpg" /></div>
<div class="small"><img src="images/2.jpg" /></div>
<div class="big"><img src="images/3.jpg" /></div>
</div>
<div id="section2" class="span4">
<div class="small"><img src="images/1.jpg" /></div>
<div class="small"><img src="images/2.jpg" /></div>
<div class="big"><img src="images/3.jpg" /></div>
</div>
</div>
</div>
My CSS looks like this :
我的 CSS 看起来像这样：
#section1 .small{
width:150px;
height:200px;
overflow:hidden;
}
#section1 .big{
width:320px;
height:420px;
overflow:hidden;
}
#section2 .small{
width:80px;
height:100px;
overflow:hidden;
}
#section2 .big{
width:170px;
height:220px;
overflow:hidden;
}
Other styles are bootstrap's.
其他样式是 bootstrap 的。
采纳答案by soundswaste
I completely forgot about this question I had asked. I resolved the above situation by :
我完全忘记了我问过的这个问题。我通过以下方式解决了上述情况：
1) Setting equal left and right margins on the main container.
1) 在 main 上设置相等的左右边距container。
2) Setting the isotope in Section1 to right-to-left. Mine isnt really an Arabic site, but I am using images mostly so no issues.
2) 将 Section1 中的同位素设置为从右到左。我的网站并不是真正的阿拉伯语网站，但我主要使用图像，所以没有问题。
Also, remove fixed-width specifications for all sections. Let the margins on container, and bootstrap's fluid design take care of centered-optimized design.
此外，删除所有部分的固定宽度规范。让容器上的边距和引导程序的流体设计照顾到中心优化的设计。
回答by balexandre
I also use bootstrapwith isotope, but what I do first is make sure the width's and height's respect my own design.
我也使用带有isotope 的引导程序，但我首先要做的是确保's 和's 尊重我自己的设计。widthheight
just change the ones you use, normally I end up using
只需更改您使用的那些，通常我最终会使用
.width2, .width3, .width4, .width8and .height2, .height4
.width2, .width3, .width4,.width8和.height2,.height4
then, make sure your containerhas the correct size and apply to isotope.
然后，确保您container的尺寸正确并适用于同位素。
after that, all your design will be set and fall correctly with your sizes.
之后，您的所有设计都将根据您的尺寸进行设置和正确放置。
by the way, you should end up having something like this:
顺便说一句，你最终应该有这样的事情：
<div id="container">
<div class="weather item width2 height8" data-id="1"></div>
<div class="country item width2 height4" data-id="2"></div>
<div class="country item width2 height4" data-id="3"></div>
<div class="country item width2 height4" data-id="4"></div>
<div class="country item width2 height4" data-id="5"></div>
</div>
and inside each div, I personally use JsRenderto render the templates, but you should have the bootstrap layout, inside each .item
在每个 div 中，我个人使用JsRender来渲染模板，但是您应该在每个 div 内部都有引导程序布局.item
