我需要一些帮助，或者更确切地说是建议。我一直致力于为我的雇主创建一个非常基本的招聘门户。然而，我似乎没有正确设置 Bootstrap 脚手架，因为从较小的设备上看时，这些列似乎被“压扁”在一起。 令我困惑的是，我使用了 xs 列，我原以为会考虑较小的设备，因此会相应地调整列的宽度...
如果有人能告诉我我做错了什么或告诉我如何修复它以使其响应更快，我将非常感激。
这是一个pen to a working example以下是列(无标题):
<div class="row buffer-top">
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/placeholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank"class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p><a href="portals/0/resources/pdf/softwarePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/hOfficePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p><a href="portals/0/resources/pdf/consultantPlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
</div>
最佳答案
尝试下面的代码并查看 Bootply Demo
可以添加col-lg-3 col-md-3 col-sm-6 col-xs-12
col-lg-3 用于大型设备， col-md-3 用于中型设备， col-sm-6 用于中小型设备， 用于移动设备的 col-xs-12
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle one">
<div class="table-row"> <span>Site Access </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle two">
<div class="table-row"> <span>Developers</span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle three">
<div class="table-row"> <span>Head Office </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle four">
<div class="table-row"> <span>Consultants </span> </div>
</div>
</div>
</div>
<div class="row buffer-top">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/placeholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p><a href="portals/0/resources/pdf/softwarePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/hOfficePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p><a href="portals/0/resources/pdf/consultantPlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
</div>
</div>
关于html - Bootstrap 列被压扁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39613249/