Question

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

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

documentation

Before

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

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

Answer 1

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

Bootstrap 3.3：https://getbootstrap.com/docs/3.3/components/

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

进度条： https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
网格： https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
图片响应： https://www.w3schools.com/bootstrap/bootstrap_images.asp

快乐编码：一切顺利，请在完成后分享链接。

<!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">
  
<style>

</style>
</head> 

  <body>
    <section>
        <div class="container langages" id="skills">
            <div class="row iconskills">
                <!-- HTML -->
                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
                    </div>
                    <div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
                
                
                <!-- CSS -->
                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
                    </div>
                    <div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
                <!-- BOOTSTRAP -->

                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
                    </div>
                    <div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>
    <footer>
       
    </footer>
  </body>
</html>

Answer 2

非常感谢您的回答！

在每种语言中添加新div的简单事实帮助我解决了问题！

再次感谢！

Bootstrap网格：减小窗口大小时，最后一行不会进入下一行

2 个答案: