在较小的视口中出现Bootstrap网格对齐问题

时间:2015-04-20 22:08:17

标签: twitter-bootstrap

在以下网站上:http://fun-booths.co.uk/ - 主页上有一个功能 - .row内有9个红色框,带有一些复制文本。但是,如屏幕截图所示,出现以下问题(视口大小为768px - 1199px):

我不明白为什么<div class="col-md-4 col-sm-6">中的每一个都没有出现在整齐的2行中,为什么有些人在视觉上突然出现,例如&#34;面部识别&#34;和&#34;绿屏&#34;框。请问我可以帮助解决问题和解释吗?谢谢。

enter image description here

这是HTML:

<div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-camera"></i> Flawless Design</h4>
        Our photo booths feature Canon DSLR cameras that capture the images with great colour and picture quality.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-video-camera"></i> HD Video</h4>
        Our photo booths give users the opportunity to record 1080p high definition video during their event.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-picture-o"></i> Bespoke Prints</h4>
        Our booths feature a state-of-the-art Mitsubishi Dye Sub printing system to give you amazing, professional quality prints.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4>Prop Box</h4>
        Our Booths come with a customised prop box bursting with fun items to enhance the photo booth experience.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-smile-o"></i> Facial Recognition</h4>
        The latest facial recognition technology allows people in the booth to apply a wide variety of digital props on their faces.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-hand-o-up"></i> Touch Screen</h4>
        Our Booths are operated by a large, user-friendly touch screen. This allows you to discover all the exciting features easily.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-user"></i> Booth Attendant</h4>
        A professional booth attendant will be avail throughout the evening to assist with an queries.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-users"></i> Green Screen</h4>
        Green screen technology allows you to customise the backgrond of photos and videos. Including 3D.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-facebook-square"></i> Facebook Upload</h4>
        Share your booth photos with friends instantly on Facebook from our photo booth.
      </div>
    </div>
</div>

0 个答案:

没有答案