html - 最小化窗口时自动调整元素大小

Question

你好，我正在做一个元素，我遇到了一个问题。 当我最小化我的窗口时，我的“元素”(即 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

如您所见，我的 blocs (HTML5) 位于容器外部，而且右侧有一个灰色空间挡住了另一张图像(位于 col-md-2 中)，这是来自边距还是填充在 body 或主要部分？

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

-- 此外，我大部分时间都使用 col-md，是否有适用于较小屏幕的等价物，我在制作 col 时应该精确？

我希望我已经足够清楚了 (:

Answer 1

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

display: inline-block;

如果没有足够的空间，这应该会使 DIV 向下排列。