Bootstrap 在列之间添加空格

Posted 2023-03-06

【中文标题】Bootstrap 在列之间添加空格

【英文标题】：Bootstrap Add Space between Columns

【发布时间】：2017-01-22 09:03:06

【问题描述】：

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

上查看它的实际效果

codepen.io

我所做的是在每列的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;
    
  

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

【问题讨论】：

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

【参考方案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>