我正在尝试在网页上设计此页脚，并将文本和社交按钮的容器设置为col-md-3。到目前为止，还不错，但是我希望他们将自己排列为3到2行，当我调整窗口大小时，它会从4列捕捉到3列，然后直接捕捉到1列<footer class="container-fluid container-footer">脚-> <div class="col-md-2 col-md-offset-1"> <span> DARKWOOD </span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2 col-md-offset-1"> <span> PRODUCTS </span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2"> <span> ABOUT</span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2 social-hub"> <span> SOCIAL</span> <div class="row-fluid for-social"> <a href="#"><div class="col-xs-3 social" id="facebook"></div></a> <a href="#"><div class="col-xs-3 social" id="google-plus"></div></a> <a href="#"><div class="col-xs-3 social" id="twitter"></div></a> <a href="#"><div class="col-xs-3 social" id="tumblr"></div></a> </div> </div></div> <div class="col-md-12" id="copyright"></div>所有代码都在这里：Fiddle另外，图片：最初：中间：上一个：因此，如您所见，最终图像至少有两个类别足够的空间。//编辑//你们能考虑解决这个问题的任何方法吗？ 最佳答案 我相信您需要添加其他“ col”类来描述所需的行为。例如，如果要在小屏幕上使用2x2，则需要执行以下操作：<footer class="container-fluid container-footer"> <div class="row-fluid "> <div class="col-md-2 col-md-offset-1 col-sm-4 col-sm-offset-2"> <span> DARKWOOD </span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2 col-md-offset-1 col-sm-4 col-sm-offset-2"> <span> PRODUCTS </span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2 col-sm-4 col-sm-offset-2"> <span> ABOUT</span> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p> </div> <div class="col-md-2 social-hub col-sm-4 col-sm-offset-2"> <span> SOCIAL</span> <div class="row-fluid for-social"> <a href="#"><div class="col-xs-3 social" id="facebook"></div></a> <a href="#"><div class="col-xs-3 social" id="google-plus"></div></a> <a href="#"><div class="col-xs-3 social" id="twitter"></div></a> <a href="#"><div class="col-xs-3 social" id="tumblr"></div></a> </div> </div> </div> <div class="col-md-12" id="copyright"></div></footer>请记住，“行”的宽度是12个“单位”，并且“大小”（例如md，sm等）超过12的任何内容都将被包装。因此，在上面，通过将div宽度设置为6（col-sm-4 + col-sm-offset-2），它们将成对包装，直到超小尺寸接管为止。因此，col-md-3表示中等大小的容器宽度的3 / 12s。还要记住，这些类仅适用于向上（例如col-md-3将在中等和较大的情况下起作用，而不是较小或非常小的情况）。关于html - Bootstrap Col-md-3安排，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32912568/
