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

正如你可以看到我的集团（HTML5）在容器之外，而且右边有一个灰色空间可以阻挡另一个图像（位于col-md-2中），这可以来自边距或填充在身体或主要部分？

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

- 我大部分时间也总是使用col-md，对于较小的屏幕是否有等效性，当我制作我的col时我应该精确吗？

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

Answer 1

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

display: inline-block;

如果他们没有足够的空间，这应该让DIV连续下去。

Answer 2

Great Keval Bhatt，我将宽度px更改为％，它几乎完美地工作了！

我也尝试过显示：inline-block;但当我最小化时，我的物品在容器“后面”，所以它们消失了。将px更改为％工作，再次感谢！（：

Answer 3

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

（注意：您可以使用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 个答案: