Javascript 引导网格：减少窗口大小时，最后一个div不会进入下一行_Javascript_Twitter Bootstrap 3

Javascript 引导网格：减少窗口大小时，最后一个div不会进入下一行

javascript twitter-bootstrap-3

Javascript 引导网格：减少窗口大小时，最后一个div不会进入下一行,javascript,twitter-bootstrap-3,Javascript,Twitter Bootstrap 3,问题是：使用Bootstrap 3.3.7 我有6个图像（3个图标和3个进度条），希望在将窗口大小从col lg减小到col md（使我的站点尽可能响应）时，最后2个图像转到下一行。问题是它没有，下面是代码： <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcd

问题是：使用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>

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

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

我可能错过了一些明显的东西，但帮助将是伟大的，谢谢！

如果我不清楚或遗漏了一些信息，请不要犹豫。

我认为您正在尝试实现以下布局。我的观点是，您应该熟悉bootstrap内置组件（类）。我已经改变了你的小代码，你可以进一步编辑它，并参考你的图像正确的路径

引导程序3.3：

我在构建中使用的一些参考css链接

进度条：

网格：

图像响应：

快乐编码：祝你的简历万事如意，完成后一定要分享链接


70%
70%
70%

非常感谢您的回答

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

再次感谢

你能不能至少提供一个可以测试的工作示例，而且看起来你忘记了第一张图片上的偏移量。我编辑了代码，以便可以测试它。还有，你说我在第一张图像上缺少偏移是什么意思，你能更具体一点吗？请注意，我从lg开始，一直到xs，都在研究响应性，因为我一直都在研究md，所以不要考虑sm和xs，因为我还没有彻底研究它，md是现在的问题。