时间戳

首页 > 解决方案 > 引导网格：减小窗口大小时，最后一个 div 不会出现在下一行

javascript - 引导网格：减小窗口大小时，最后一个 div 不会出现在下一行

问题描述

这就是问题所在：使用 Bootstrap 3.3.7 我有 6 个图像（3 个图标和 3 个进度条）并希望在将窗口大小从 col-lg 减小到 col-md 时让最后 2 个图像进入下一行（使我的网站尽可能响应。）问题是它没有，这是代码：

<!DOCTYPE html>
<html>
  <head>
    <!-- Boostrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <section>
        <div class="container langages" id="skills">
            <div class="row iconskills">
                <!-- HTML -->
                <div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
                    <img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
                </div>
                <div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
                <!-- CSS -->
                <div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
                    <img class="logocss" src="img/logos/css32.png" alt="logo css3" />
                </div>
                <div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
                <!-- BOOTSTRAP -->
                <div class="col-xs-6 col-sm-1 col-lg-1">
                    <img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
                </div>
                <div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
            </div>
        </div>
    </section>
    <footer>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </footer>
  </body>
</html>

我添加了 2 个屏幕截图来显示正在发生的事情：

前

后

奇怪的是，引导程序有一个由 12 列组成的网格，当我在 col-md 中签入我的 div 时，我的前 4 个 div 中有这 12 列（这是我想要的，因为我希望最后 2 个去下一行）但行为不是我所期望的。

我可能遗漏了一些明显的东西，但帮助会很大，谢谢！如果我不清楚或缺少一些信息，请不要犹豫。

标签： javascripttwitter-bootstrap-3

解决方案

非常感谢您的回答！

围绕每种语言添加一个新的 div 的简单事实帮助我解决了我的问题！

再次感谢！

推荐阅读