我需要一些帮助或建议。我一直致力于为我的雇主创建一个真正基本的招聘门户网站。然而，似乎我没有正确设置自举脚手架，因为柱子看起来非常被压扁了＃39;从较小的设备看它时一起。 令我感到困惑的是，我使用了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>
答案 0 :(得分：1)
尝试以下代码并查看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>
答案 1 :(得分：0)
col-xs- *类将以较小的宽度保持布局。你需要使用col-sm- *类。它们将以767px的速度突破，因此在较小的设备中将有足够的空间来水平显示整个div。
答案 2 :(得分：0)
你可以将它分成两组，对于较小的屏幕，我猜它没有偏移看起来更好（我猜你可能需要调整你的CSS代码，因为我已经看到了一些边距）：{{3} }
<div class="row buffer-top">
<div class="col-sm-3 col-xs-6 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-sm-3 col-xs-6 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-sm-3 col-xs-6 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-sm-3 col-xs-6 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>
对于CSS：
.thumbnail {
margin: 0 auto 20px auto;
width: 200px;
height: 350px;
border: 2px solid black;
}