最小化窗口时自动调整项目大小答案

【问题标题】：Automatically resize items when minimizing window最小化窗口时自动调整项目大小
【发布时间】：2015-05-24 14:07:51
【问题描述】：

您好，我正在做一个项目，但遇到了问题。当我最小化窗口时，我的“项目”（即 div）会从容器中取出。我的代码有点奇怪，但到目前为止它还在工作，这是我的项目。

<div class="containerpage">
<div class="container">
    <div class="artcontainer">
        <div class="row">
            <div class="container">
                <div class="col-md-10">
                    <div class="col-sm-4 col-md-4">
                        <div class="post">
                            <div class="post-img-content">
                            <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
                            <span class="post-title"><b>Make a Image Blur Effects With</b><br />
                            <b>CSS3 Blur</b></span>
                            </div>
                        <div class="content">
                        <div class="author">
                            By <b>Bhaumik</b> |
                            <time datetime="2014-01-20">January 20th, 2014</time>
                        </div>
                        <div>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                            Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                            unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </div>
                        <div>
                            <a href="http://www.jquery2dotnet.com/2014/01/jquery-highlight-table-row-and-column.html" class="btn btn-warning btn-sm">Read more</a>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
                <!-- Same col-sm-4 col-md-4 several times on col-md-10 that make my "thumbnails"-->
                <div class="col-md-2">
                <!-- Image that you can see on the right -->
                </div>
            </div>
        </div>
    </div>
</div>

现在，当我最小化我的窗口时会得到什么：http://i.stack.imgur.com/wid7y.jpg

如您所见，我的块 (HTML5) 位于容器外部，而且右侧有一个灰色空间会阻挡另一张图像（位于 col-md-2 中），这可能来自边距或填充在身体或主要部位？

网站上的所有其他元素都会自动调整大小，但没有这部分，我的错误在哪里？这是来自 CSS 吗？实际上，我希望我的项目在最小化时不要变小，而是在最小化时自动逐行显示。

-- 而且我大部分时间都在使用 col-md，在我制作 col 时我应该精确地处理较小的屏幕是否有等价物？

我希望我已经足够清楚了（：

【问题讨论】：

我的朋友，你能不能请你摆弄你的代码
您的解决方案是提供宽度（百分比）而不是像素

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试将以下行添加到您的 DIV 元素的 css 类中：

display: inline-block;

如果 DIV 没有足够的空间，这应该会使它们连续下降。

【讨论】：

【解决方案2】：

您可以在下面编码的 col-xs-* div 中使用 col-xs-* 类实现列之间的间距。间距是一致的，以便所有列都正确排列。为了获得均匀的间距和列大小，我会执行以下操作：

（注意：您可以使用 col-xs-* 或 col-md-* 或 col-sm-* 。我使用 col-xs-*）

 <div class="container">
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
        <div class="col-md-3 ">
            <div class="col-md-12 well">
                Some Second Content..
            </div>
        </div>
    </div>

【讨论】：

【解决方案3】：

伟大的 Keval Bhatt，我将宽度 px 更改为 % 并且效果几乎完美！

我也试过 display: inline-block;但是当我最小化时，我的物品在容器“后面”，所以它们消失了。将 px 更改为 % 有效，再次感谢！（：

【讨论】：