Jquery 调整引导div的大小以适应内容

我正在使用twitter引导，使2个div并排放置。每个div内部都有中型和大型图像，使用jquery同位素进行排列。 问题是当一个div中没有足够的图像时，div的宽度保持不变，并且还有很多额外的空间。这样地：

我想让div居中对齐，同时缩小宽度以适应其中的图像。这样地：

我的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>

其他样式是bootstrap的。

我也使用，但我首先要做的是确保

宽度和
高度尊重我自己的设计

只要换一下你用的，通常我会用的

.width2
，
.width3
，
.width4
，
.width8
和
.height2
，
.height4

然后，确保您的
容器
大小正确，并应用于同位素

之后，您的所有设计都将根据您的尺寸正确设置

顺便说一句，你应该得到这样的东西：

<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>



在每个div中，我个人使用它来呈现模板，但是在每个
中都应该有引导布局。我通过以下方式解决了上述情况：

1） 在主
容器上设置相等的左右边距

2） 将第1节中的同位素设置为。我的网站不是一个真正的阿拉伯语网站，但我主要使用图片，所以没有问题

此外，删除所有截面的固定宽度规格。让容器上的边距和bootstrap的流体设计考虑中心优化设计。
为什么为这些类设置宽度？你试过最大宽度吗？
<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>