如何删除Chrome中的bootstrap填充

时间:2014-06-13 18:21:14

标签: css twitter-bootstrap-3

我正试图将div放在页面中心,水平和放大;垂直。这是实现的,但有一些左右填充,铬。如何删除它。在Firefox中运行良好。

MyStyle.css:

html, body
{
  height:100%;
  margin:0;
  padding:0;
}

.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding:0;  
}

.row-fluid 
{
  height: 100%; 
  display:table-cell; 
  vertical-align: middle;  
}

.centering {
  float:none;
  margin:0 auto;
}

// bootstrap css for .container-fluid
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

HTML:

<div class="container-fluid">
        <div class="row-fluid" style="background-color: blue">
            <div class="centering text-center col-lg-1" 
                 style="background-color: green">
                Yeah I'm centered
            </div>
        </div>
    </div>

蓝色不填充镀铬页面,右边有填充和左

1 个答案:

答案 0 :(得分:1)

好的我明白了。在CSS中添加了一个称为内容的伪元素,导致了这个问题。在css: how to remove pseudo elements (after, before, ...)的帮助下,我找到了一个解决方案,将其添加到您的CSS中:

.container-fluid:before{
    content:none;
}

.container-fluid:after{
     content:none;
}

改变你的中心课程:

.centering {
  float:none;
  margin:0 auto;
  padding-left:0px;
  padding-right:0px;
}

<强> Bootply Demo