Question

我使用bootstrap来创建响应式Web。我将使用css中的代码制作全宽标题：

@media (max-width: 767px) {
body { padding-left: 20px; padding-right: 20px; }
.navbar{margin-left:-20px !important;margin-right:-20px !important;width: 100% !important;}
}

这个html文件：

<body>
<header>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <!--content-->
        </div>
    </div>
</div>
</header>

为什么我的标题不能全宽，右边任何已分配的空格。请查看此内容：注意：我在主体上使用填充，因为正文（滑块和标题除外）想要使用填充。

]：http://www.flickr.com/photos/99517249@N07/9512136615

Answer 1

你的CSS将标题拉到左侧，因此空间..试试这个：

<强> CSS

@media (max-width: 767px) {
body { padding-left: 20px; padding-right: 20px; }
}

<强> HTML

<body>
<header>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <!--content-->
        </div>
    </div>
</div>
</header>

这里有一个jsfiddle供你玩：http://jsfiddle.net/msturdy/HJsLR/

这完全基于 Bootstrap 3

注意，如果您希望它是真正的全宽，请从padding-left css中移除padding-right和body{}

我的标题不能全宽

1 个答案: