从 bootstrap 列中删除填充或边距

Question

我第一次使用 bootstrap（版本 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 类我以为我删除了列的填充。将主 div 设置为 'class="container"' 我得到的结果是：

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

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

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

从 bootstrap 列中删除填充或边距

Getting rid of padding or marging from bootstrap columns

html

css

alignment

grid-layout

twitter-bootstrap-3