Question

我密切关注the most popular example如何在列之间添加空格，但它不起作用。您可以在

中查看它

我所做的是为每列col-sm-12添加col-sm-4。根据{{3}}，这应该会自动在2个div之间渲染一些空格。

HTML：

<div class="row blocks-grid">
  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>  
</div>

CSS：

body {
  background: #BEB7A4;
}
.blocks-grid {
  max-width:75.0rem; 
  margin:0 auto;
  .item {
    cursor: pointer;
    margin-bottom:1rem;
    position:relative;
    height:34.0rem;
    padding-top:2.5rem;
    background:#FFFFFC;
    &:hover {
      background:#FF0000;
      color:white;
      img {
        display:none;
      }
    }
    h2 {
      font-size:2.0rem;
      margin-top:1rem;
      text-align: center;
    }    
    img {
      max-width: 100%;
      margin:auto;
      display:block;
    }
  }
}

基本上，我认为结果看起来像下面的照片，但它没有：

most popular answer here

Answer 1

你可以试试这个：Demo

添加＆＃34;项目＆＃34;与＆＃34; col-sm-12＆＃34;

一起上课

body {
  background: #BEB7A4;
}

Answer 2

我对您的代码进行了一些更改。

<强> HTML

请注意添加到subitem div的col-sm-12类。

<div class="row blocks-grid">
  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>  
</div>

<强> LESS

body {
  background: #BEB7A4;
}
.blocks-grid {
  max-width:75.0rem; 
  margin:0 auto;
  .item {
    cursor: pointer;
    margin-bottom:1rem;
    position:relative;
    height:34.0rem;
    padding-top:2.5rem;
    .subitem {
      background:#FFFFFC;
      height: 100%;
      padding-top: 50px;
      &:hover {
        background:#FF0000;
        color:white;
        img {
          display:none;
        }
      }
      h2 {
        font-size:2.0rem;
        margin-top:1rem;
        text-align: center;
      }    
      img {
        max-width: 100%;
        margin:auto;
        display:block;
      }
    }    
  }
}

看看：http://codepen.io/anon/pen/KgzVRK

希望它可以帮助你。

Answer 3

你实际上可以删除所有额外的垃圾并让bootstrap为你做...不要改变框架上的边距/宽度。这就是你所需要的......

HTML

<div class="row">
  <div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x250">
    <h2>This is me</h2>
  </div> 
<div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x150">
    <h2>This is me</h2>
</div>  
  <div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x150">
    <h2>This is me</h2>
  </div>  
</div>

CSS

img { width: 100%; }

Answer 4

您可以尝试将课程项目从col-xs-6移至col-sm-12

摘录：

＆＃13;

body {
        background: #BEB7A4;
    }

    .blocks-grid {
        max-width: 75.0rem;
        margin: 0 auto;
    }

    .blocks-grid .item {
        cursor: pointer;
        margin-bottom: 1rem;
        position: relative;
        height: 34.0rem;
        padding-top: 2.5rem;
        background: #FFFFFC;
    }

    .blocks-grid .item:hover {
        background: #FF0000;
        color: white;
    }

    .blocks-grid .item:hover img {
        display: none;
    }

    .blocks-grid .item h2 {
        font-size: 2.0rem;
        margin-top: 1rem;
        text-align: center;
    }

    .blocks-grid .item img {
        max-width: 100%;
        margin: auto;
        display: block;
    }

＆＃13;

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
    <style>
        body {
        background: #BEB7A4;
    }

    .blocks-grid {
        max-width: 75.0rem;
        margin: 0 auto;
    }

    .blocks-grid .item {
        cursor: pointer;
        margin-bottom: 1rem;
        position: relative;
        height: 34.0rem;
        padding-top: 2.5rem;
        background: #FFFFFC;
    }

    .blocks-grid .item:hover {
        background: #FF0000;
        color: white;
    }

    .blocks-grid .item:hover img {
        display: none;
    }

    .blocks-grid .item h2 {
        font-size: 2.0rem;
        margin-top: 1rem;
        text-align: center;
    }

    .blocks-grid .item img {
        max-width: 100%;
        margin: auto;
        display: block;
    }
    </style>
</head>
<body>
<div class="row blocks-grid">
    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12  item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12 item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12 item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>
</div>

</body>

＆＃13;

引导程序在列之间添加空格

4 个答案: