Bootstrap Jumbotron 沒有變成 Body 的全寬

Question

嗨，我正在嘗試將我的 Jumbotron 修復為屏幕的全寬，但不知何故它需要一個15px padding-left, padding-right 。 如果我移除內邊距，水平滾動條就會出現 30 30px right margin 。 我使用的是默認的 Bootstrap 版本 3.0.3 和默認的 VS2013 布局。 根據此鏈接，我刪除了所有.container之外的 Jumbotron 我的頁面看起來像這樣

<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; 
}

編輯： Firefox + Chrome + IE10 結果 ===|==================|===

關於如何修復布局的任何想法？ 我還沒有接觸過使用 Nuget 更新的 Bootstrap CSS。

Answer 1

只是為了分享我在 Visual Studio 2013 中創建 MVC Web 應用程序后的經驗，無論我做什么，我都無法讓超大屏幕拉伸屏幕的寬度。 我最終發現它被 Views/Shared/_Layout.cshtml 頁面上的默認 **container body-content 標簽阻止。 刪除標簽后，它顯示正確。 希望能幫助到和我有類似情況的人。

Answer 2

解決辦法很簡單。 這就是我如何划分它：

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

CSS 的任何部分都沒有更改。 我不知道它為什么有效，但它確實有效。

Answer 3

如果您只是想刪除填充，那么您需要放置padding:0; 在您的.specialjum ，並確保在引導程序之后調用自定義樣式表。 否則添加padding:0!important; 如果之前需要調用。 同樣對margin-right:重復此操作，並添加width:100%; 如果它沒有延伸到我認為應該已經達到的頁面寬度。

看到這個jsFiddle

Answer 4

對於可能會在這里結束的其他人，我有一個替代解決方案。 我遇到了這個問題，但我無法將我的 Jumbotron 帶出它的容器。 我所做的只是將它包裝在一個<div class="row"></div> 。 我仍在學習引導程序，所以我不知道這是否會導致任何問題，但現在它工作得很好。

Answer 5

為了使jumbotron全寬且沒有圓角，請將其放置在所有 .containers 之外，而是在其中添加一個 .container。

Answer 6

_Layout.cshtml 中的另一個選項（其中“主頁”是您想要全寬的頁面）：

@if (ViewData["Title"].Equals("Home"))
{
    @RenderBody()
}
else
{
    <div class="container container-main">
        <main role="main">
            @RenderBody()
        </main>
    </div>
}

Answer 7

將.container寬度更改為 100%：

container { width: 100% }

Bootstrap Jumbotron 沒有變成 Body 的全寬

問題描述

7 個解決方案

解決方案1
6 2017-05-11 17:06:13

解決方案2
5 已采納 2013-12-31 18:06:56

解決方案3
2 2013-12-31 17:40:00

解決方案4
1 2016-10-07 06:21:47

解決方案5
1 2016-11-05 03:13:45

解決方案6
1 2020-03-01 05:51:24

解決方案7
0 2014-07-09 19:28:39

Bootstrap Jumbotron 沒有變成 Body 的全寬

問題描述

7 個解決方案

解決方案1 6 2017-05-11 17:06:13

解決方案2 5 已采納 2013-12-31 18:06:56

解決方案3 2 2013-12-31 17:40:00

解決方案4 1 2016-10-07 06:21:47

解決方案5 1 2016-11-05 03:13:45

解決方案6 1 2020-03-01 05:51:24

解決方案7 0 2014-07-09 19:28:39

解決方案1
6 2017-05-11 17:06:13

解決方案2
5 已采納 2013-12-31 18:06:56

解決方案3
2 2013-12-31 17:40:00

解決方案4
1 2016-10-07 06:21:47

解決方案5
1 2016-11-05 03:13:45

解決方案6
1 2020-03-01 05:51:24

解決方案7
0 2014-07-09 19:28:39