从引导列中删除填充或边距答案

【问题标题】：Getting rid of padding or marging from bootstrap columns从引导列中删除填充或边距
【发布时间】：2016-06-01 07:33:22
【问题描述】：

我第一次使用引导程序（3.3.6 版）来创建我的网站。阅读文档并开始编写代码。不包括<link> 的下面的代码是我网站的结构：

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
            <div class="loader">
                <div class="loader-bg">
                    ...
                </div>
            </div>
        </div>
        <div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
            <div class="black-box">
                <p class="info-message">Coming <span>VERY</span> soon!</p>
                <p class="text-message">Until then, my contacts:</p>
               ...
            </div>
        </div>
   </div>
</div>

使用 push 和 pull 类，我以为我已删除了列的填充。用 'class="container"' 设置主 div 我得到了结果：

更改为 'class="container-fluid"' 行为仍然很奇怪。注意形状重叠页面：

我想要的结果是：圆形和矩形（都是 div）保持与页面边缘（左右）对齐，没有填充或边距。到目前为止，遵循文档不起作用。这是什么行为？

【问题讨论】：

标签： html css twitter-bootstrap-3 alignment grid-layout

【解决方案1】：

默认情况下col-* 有padding，所以你只需要重置它们

[class^="col"] {
  padding: 0
}
[class$="-2"] {
  background: orange
}
[class$="-10"] {
  background: grey
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <div class="loader">
        <div class="loader-bg">
          ...
        </div>
      </div>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
      <div class="black-box">
        <p class="info-message">Coming <span>VERY</span> soon!</p>
        <p class="text-message">Until then, my contacts:</p>
        ...
      </div>
    </div>
  </div>

【讨论】：