摆脱填充或从引导列拖尾

我第一次使用引导（版本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>

使用推和拉类，我想我取出填充的列。设置以“类=‘容器’”主DIV我有结果：

更改为“类=‘容器流体’”的行为仍然是陌生的。注意形状重叠页面：

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

来源

2016-05-31 learner

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

来源

2016-05-31 23:33:22 dippas

摆脱填充或从引导列拖尾

回答

相关问题