如何在 Chrome 中删除引导填充

Question

我试图在页面中水平和垂直居中 div。这是实现的，但在 chrome 中有一些左右填充。这个怎么去掉。在 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>

蓝色没有填满chrome的页面，左右两边都有填充。

Answer 1

好的，我想通了。在 CSS 中添加了一个名为 content 的伪元素，这导致了此问题。在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