Question

使用bootstrap，我在一个屏幕中创建 6个缩略图，其中每一行只包含最多 3个缩略图。一切都很好，但是当浏览器调整大小时，缩略图会相互重叠。请参阅以下差异：

调整大小之前：

调整大小后：

守则：

<div class="row">
    <div class="col-lg-12">
        <div class="ui-widget">
            <div class="main_content">
                <div class="col-sm-4>
                    <!-- 1st thumb -->
                    <div id="video1.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb1.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                    <!-- 2nd thumb -->
                    <div id="video2.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb2.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                    <!-- 3rd thumb -->
                    <div id="video3.mp4" class="thumbnail" style="height:205px;width:337px;background-image:url('http://localhost/myapps/uploads/thumb/thumb3.jpg')">
                        <div style="position: absolute;bottom:40%;left:40%;" onclick="loadModal();">
                            <div class="thumb_text" style="z-index:1; position:relative;"></div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</div>

Answer 1

问题的至少一部分是你已经给出了div明确的宽度（style="width:337px;"）。这意味着，如果您的窗口小于1011px（3 x 337px），则它们无法彼此相邻并且仍然适合该行。

另一个问题是你也错误地使用了bootstrap类;如果你想要3个等宽的列，每个列有1个缩略图，那么你应该将每个列放在它自己的col-sm-4容器中，如本w3schools示例所示（http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp）

您还需要在col-中添加bootstrap row类，如下所示：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

我看到您在HTML代码段的最顶部有一行，但是您需要为每组列添加一个新行。现在，如果没有适用于ui-widget和main_content类的CSS，我会很难看到其余代码会做什么，但如果你从HTML中获取内联样式并清理你的引导结构，应该让你开始并解决你的大部分问题。如果您在此之后仍然遇到问题，可以使用新代码返回并编辑问题。

Answer 2

首先，您没有遵循bootstrap默认网格系统。但我不知道你为什么要修复它。我有一个解决方案。请使用下面的css代码。它可能对你有帮助。

.thumbnail{
     max-width:calc(33.33% - 10px);
     margin:0 5px;
}

html - DIV使用Bootstrap相互重叠

2 个答案: