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>

使用推送和拉类我认为我删除了列的填充。使用'class =“container”'设置主div我有结果：

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

我想要的结果是：圆形和矩形（两者都是div）保持与页面边缘（左边和右边）对齐，没有填充或边缘。以下文档直到现在都不起作用。这种行为发生了什么？

Answer 1

默认情况下col-*有padding，因此您只需要重置它们

＆＃13;

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

＆＃13;

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

＆＃13;

从bootstrap列中删除填充或游戏

1 个答案: