Bootstrap布局问题：如何让图片纵向排列而非横向排列

嘿，我看了你的代码和当前效果，问题根源很清晰——你给每个图片容器用了col-xs-4 col-sm-3 col-md-2这类Bootstrap栅格类，这些类的作用是让元素占据一行的部分宽度（比如col-xs-4就是占1/3宽度），所以它们会自动横向并排。要实现你想要的纵向堆叠效果，只需要调整栅格类，让每个容器占满整行即可，同时建议遵循Bootstrap的栅格规范来优化结构。

具体修改方案： #

• 把每个图片所在的div的栅格类替换为col-xs-12（这个类会让元素在所有屏幕尺寸下都占满整行，自然纵向排列）
• 将所有图片容器包裹在一个row容器内，符合Bootstrap栅格的嵌套规范，避免不必要的间距问题

修改后的完整HTML代码： #

<html>
<head>
<title> </title>
<link rel="stylesheet" href="css/cece.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<form action="#" method="post">
  <!-- 添加row容器包裹所有列 -->
  <div class="row">
    <div class="col-xs-12 text-center">
      <label class="image-checkbox">
        <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
        <input type="checkbox" name="artikel1" value="" />
        <i class="fa fa-check hidden"></i>
      </label>
    </div>
    <div class="col-xs-12 text-center">
      <label class="image-checkbox">
        <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
        <input type="checkbox" name="artikel2" value="" />
        <i class="fa fa-check hidden"></i>
      </label>
    </div>
    <div class="col-xs-12 text-center">
      <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
    </div>
    <div class="col-xs-12 text-center">
      <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
    </div>
  </div>
  <!-- 给按钮加margin-top让它和图片分开更美观 -->
  <input type="submit" class="btn btn-success" value="Submit Button" style="margin-top:15px;">
</form>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/checkboxes.js?t=<?php time(); ?>"></script>
</html>

补充说明： #

如果你希望在大屏幕上保持横向排列、仅小屏幕下纵向堆叠，可以把栅格类改成col-xs-12 col-md-2——这样在小屏幕（xs）下占满整行纵向排列，大屏幕（md及以上）还是保持原有的横向布局。不过根据你的需求描述，直接用col-xs-12就能实现全尺寸下的纵向堆叠效果。

内容的提问来源于stack exchange，提问作者MrPerry95