Bootstrap - 带间距的列

本文介绍了Bootstrap - 带间距的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图使用引导创建四个列在一行。列之间应该有一些间距。请检查图像。有人可以告诉我如何创建一个像在图像中看到的页面？

I am trying to create four columns in a row using bootstrap. There should be some spacing between columns. please check the image. can someone tell me how to create a page like seen in the image?

推荐答案

DEMO UPDATED bootply：

DEMO UPDATED bootply: http://www.bootply.com/T8BDlFLpRD

您可以使用此代码：

<div class="container">
  <div class="row">
      <div class="col-md-3">
        <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
      </div>
    <div class="col-md-3">
            <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
  </div>
  <div class="row">
      <div class="col-md-3">
        <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">
      </div>
    <div class="col-md-3">
            <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
    <div class="col-md-3">
          <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" class="img-responsive">

      </div>
  </div>
</div>

CSS

body
{
  background:orange;
}
.col-md-3{
  height:200px;
  padding-top:25px;
}

这篇关于Bootstrap - 带间距的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！