Bootstrap 在列之间添加空格答案

【问题标题】：Bootstrap Add Space between ColumnsBootstrap 在列之间添加空格
【发布时间】：2017-01-22 09:03:06
【问题描述】：

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

上查看它的实际效果

我所做的是在每列的col-sm-4 中放置一个col-sm-12。根据most popular answer here，这应该会自动在 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;
    }
  }
}

基本上，我认为结果应该如下图所示，但事实并非如此：

【问题讨论】：

您是否正在寻找仅适用于某些列或所有列的解决方案？

标签： html css twitter-bootstrap

【解决方案1】：

你可以试试这个：Demo

用“col-sm-12”添加你的“item”类

body {
  background: #BEB7A4;
}

【讨论】：

【解决方案2】：

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

HTML

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

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

少

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

希望对你有帮助。

【讨论】：

【解决方案3】：

您实际上可以删除所有额外的垃圾并让引导程序为您完成...永远不要更改框架上的边距/宽度。这就是你所需要的......

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

【讨论】：

【解决方案4】：

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

sn-p：

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

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

【讨论】：