Bootstrap Jumbotron 没有变成 Body 的全宽 [英] Bootstrap Jumbotron not becoming full width of Body

查看：23
本文介绍了Bootstrap Jumbotron 没有变成 Body 的全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将我的 Jumbotron 修复为屏幕的全宽，但不知何故它需要一个 15px padding-left, padding-right.如果我移除内边距，水平滚动条就会出现 30px 右边距.我使用的是默认的 Bootstrap 版本 3.0.3 和默认的 VS2013 布局.根据这个 link 我删除了所有 .container 之外的 Jumbotron 我的页面看起来像这样

<div class="navbar navbar-inverse navbar-fixed-top">.... 导航内容</div><div class="jumbotron specialjum"><div class="over container body-content">....页面标题和其他东西

<p class=只是容器主体内容">... 文章主体</p>

///////////////////////////////////////////////

body {填充顶部:50px；填充底部:20px；/*背景:url(../Images/ps_neutral.png")重复；*/}/* 设置填充以防止内容碰到边缘 */.body 内容 {左边距:15px；padding-right: 15px;}.只是 {文本对齐:对齐；}.specialjum {背景:url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png')中心；颜色:#fff;背景尺寸:封面；}

Firefox + Chrome + IE10 结果 ===|================|====

关于如何修复布局的任何想法?我还没有接触过使用 Nuget 更新的 Bootstrap CSS.

解决方案

解决方案很简单.这就是我如何划分它:

 <div class="navbar navbar-inverse navbar-fixed-top">.... 导航内容</div><div><====================这个 Div 包装超大屏幕<div class="jumbotron specialjum"><div class="over container body-content">....页面标题和其他东西

<p class=只是容器主体内容">... 文章主体</p>

CSS 的任何部分都没有变化.我不知道它为什么有效，但它确实有效.

Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this

<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>

/////////////////////////////////////////////////

body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
                    
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover; 
}

Edit: Firefox + Chrome + IE10 results ===|================|===

Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.

解决方案

The solution was simple. This is how I div it:

    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
    <div> <===================this Div wrapping jumbotron
    <div class="jumbotron specialjum">
    <div class="over container body-content">
    ....page headers and other stuff
    </div>
    </div>
    <p class="just container body-content">
    ... body text
    </p>
    </div>
    </body>

No changes to any part of the CSS. I don't know why it works, but it just works.

这篇关于Bootstrap Jumbotron 没有变成 Body 的全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆