Bootstrap - columns with spacing

问题:

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?

回答1:

Anoted in the comments below, your desired box width of 344px, 4*344=1376, this doesnt fit into the bootstrap grid system for smaller sizes, so will wrap, as such you will need to use e.g:

Demo Fiddle

HTML

<div class='wrapper'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    white-space:nowrap;
    text-align:center;
}
.wrapper div {
    display:inline-block;
    background:lightblue;
    margin:5px;
    height:200px;
    width:344px;
}

Otherwise the bootstrap way:

Demo Field

Given the HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
        <div class="col-xs-3">
            <div></div>
        </div>
    </div>
</div>

You can use the CSS (should be tidied)

[class*=col] div {
    background:lightblue;
    margin:5px;
    height:200px;
}

回答2:

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

You can use this code:

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

回答3:

Using bootstrap:

<div class="row">
    <div class="col-xs-3">block 1</div>
    <div class="col-xs-3">block 2</div>
    <div class="col-xs-3">block 3</div>
    <div class="col-xs-3">block 4</div>
</div>

Inside each block, you can put your column content