Bootstrap列压扁了

时间:2016-09-21 09:55:38

标签: html css twitter-bootstrap

我需要一些帮助或建议。我一直致力于为我的雇主创建一个真正基本的招聘门户网站。然而,似乎我没有正确设置自举脚手架,因为柱子看起来非常被压扁了#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>

3 个答案:

答案 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;
}