Question

默认情况下，bootstrap不会在列之间添加空格，但我想控制它。这是我试过的

<style>
.col-md-12{
    background: red;
}
.col-md-4{
    background: lime;
}

</style>
 <div class="container">

    <div class="col-md-4 ">
        <div class="col-md-12 ">
            Some Content..
        </div>
    </div>
    <div class="col-md-4 ">
        <div class="col-md-12 ">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-4 ">
        <div class="col-md-12 ">
            Some Second Content..
        </div>
    </div>
    </div>

结果我得到了这个

但我想实现这个目标

我不想在容器和列之间添加空格。我只想在列之间添加空格。怎么做？

Answer 1

试试这个

从div

添加First和Last类

.first{
    padding-left:0px !important; 
  }

 .last{
    padding-right:0px !important; 
  }

DEMO

Answer 2

请尝试以下操作： Demo

你需要通过添加！important来覆盖现有的类（但这不是一个好习惯）。

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 5px !important;
    padding-left: 5px  !important;
}

如果你想提供这样的特定课程

.pad_s.col-xs-1, .pad_s.col-xs-2, ...{
    position: relative;
    min-height: 1px;
    padding-right: 5px !important;
    padding-left: 5px  !important;
}

HTML：

<div class="container padd_s">
    <div class="col-md-4 ">...</div>
</div>

Answer 3

请根据您的要求查看更新的代码[小提琴] [1]

[1]：https://jsfiddle.net/8ggkvwd9/ Public Function ConvertCOMPLEXITYToNumber(ByVal chain As String) As Integer Select Case chain Case "1 - Très difficile" ConvertCOMPLEXITYTToNumber = 1 Case "2 - Difficile" ConvertCOMPLEXITYTToNumber = 2 Case "3 - Modérée" ConvertCOMPLEXITYTToNumber = 3 Case "4 - Facile" ConvertCOMPLEXITYTToNumber = 4 Case Else ConvertCOMPLEXITYTToNumber = 0 End Select Exit Function End Function

Answer 4

在codepen（DEMO）上尝试此示例。我希望你能解决你的问题。

只需复制浏览器上的链接，我很抱歉我无法在此处正确提供链接。因为codepen.io可能不支持stackoverflow。

.first{margin-left:-15px;}
.third{margin-left: 15px;}

如何在3列之间添加空格

4 个答案: