我正在製作一個ASP.NET MVC5網絡應用程序。默認模板使用bootstrap，對於幾乎所有的頁面都適用。不過，我需要一個頁面有width: 100%。只有1頁100％的寬度，剩下的流體

我想使用這個視圖是一個局部視圖，所以它將被渲染在.container（參見下面的代碼）以及其他部分視圖中。

<div class="container"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
    </footer> 
</div>

所有這些都很流暢，但我需要這個100％的寬度。什麼是一個優雅的方式來做到這一點？

來源

2013-08-24 Adam Szabo

是否所有其他網頁的共享相同的.container DIV？ – cantera

是的。所有頁面都呈現在@RenderBody（）的位置。 .container的widht根據當前的窗口大小通過bootstrap進行動態維護。 –

http://stackoverflow.com/questions/15204976/bootstrap-100-width-full-width 檢查這個帖子... –

在您的部分視圖中，您可以使用jQuery來修改容器div的CSS。這將改變寬度，每當該視圖呈現，但不會影響其他網頁。

編輯：正如OP指出的，Bootstrap的JS將重置窗口大小的寬度。因此，我們必須這樣做：

$(document).ready(function(){ 
    setWidthOfContainer(); 
    $(window).resize(setWidthOfContainer); 
}); 

function setWidthOfContainer(){ 
    console.log("Setting width of container to 100%."); 
    $('div.container').css('width','100%'); 
}

在這裏看到的小提琴：http://jsfiddle.net/GqRd7/

來源

2013-08-25 00:43:48 htxryan

謝謝，但不好，因爲在調整窗口大小時，bootstrap會照顧'.container'並重新調整大小。 –

好點。更新了答案。 – htxryan

感謝您的更新。我不想走這種「以編程方式對抗引導」的方式。 –

我設法使呈現的內容absolute和left: 0的位置來解決它，但<footer>隱藏在它後面，所以我必須單獨照顧那一個（或者完全刪除它）。不是我希望的優雅解決方案，但是可行。

來源

2013-08-25 08:19:21

我有一個類似的問題，其中容器在佈局中使用，罰款大多數頁面，但我想在該容器內奇怪的全寬元素。

從Bootstrap 3開始，您可以使用.container-fluid類來獲得100％寬度的內容。但是，在.container內使用此功能不會產生任何效果，因爲它受限於寬度.container。這裏有幾個選項/解決方法我遇到：

使用部分

如果寬度爲100％的內容將在容器內容的開頭或結尾總是習慣，你可以在頁面佈局定義部分，並在其中插入100％寬度的元素。

佈局：

<div class="container-fluid"> 
    @RenderSection("containerFluid", required: false) 
</div> 

<div class="container"> 
    @RenderBody() 
</div>

查看：

@section containerFluid 
{ 
    <div>Full width content.</div> 
} 

<div>Other content</div>

在你的情況，如果你有這樣的一個頁面上沒有其他的內容，你可以只是把在整個頁面部分。

使用另一張頁面佈局

如果它是一整頁，需要有全寬，你可以只得到它使用不同的佈局。使用部分通用代碼並將.container元素更改爲.container-fluid。

正常佈局：

<!DOCTYPE html> 
<html lang="en"> 
@Html.Partial("_LayoutHead") 
<body> 
    @Html.Partial("_Navbar") 

    <div class="container"> 
     @RenderBody() 
    </div> 

    @Html.Partial("Footer") 
</body> 
</html>

替代佈局

<!DOCTYPE html> 
<html lang="en"> 
@Html.Partial("_LayoutHead") 
<body> 
    @Html.Partial("_Navbar") 

    <div class="container-fluid"> 
     @RenderBody() 
    </div> 

    @Html.Partial("Footer") 
</body> 
</html>

手動關閉容器並重新打開後

我真的不會推薦這一個，因爲它是非常哈克，並會出現錯誤，但它確實編譯和工作。如果您在內容中間的某個元素出於某種原因想要成爲全寬，則可以使用此選項。

查看：

<div>Some normal content here.</div> 

</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.--> 

<div class="container-fluid"> 
    <div>Full width div</div> 
</div> 

<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page--> 
    <div>Back to normal</div>

來源

2017-03-01 17:16:54

只有1頁100％的寬度，剩下的流體

回答

使用部分

使用另一張頁面佈局

手動關閉容器並重新打開後

相關問題