根據導航欄高度調整佈局文件中的頂部邊距

我有一個ASP MVC應用程序，並在佈局視圖文件中添加了一個圖像（400px x 400px）。我將該類設置爲img respsonsive，並在圖像中添加了一些填充。根據導航欄高度調整佈局文件中的頂部邊距

我想要包含@RenderBody()方法的div來自動調整margin-top風格，使其向下移動，具體取決於導航欄標題的高度。

我使用％20％（80px）的maax-width，並將margin-top設置爲最大值。但是如果可能的話，我想不要有太多空白。

我該怎麼做？

這裏是源代碼：

<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <img class="img-circle" src="@Url.Content("~/Content/Images/IdeaConTempLogo.png")" style="max-width: 20%; padding: 9px 15px 8px;"/> 
      @Html.ActionLink("Brand", "Home", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      </ul> 
     </div> 
    </div> 
</div> 

<!-- TODO: Adjust the top margin to automatically to add space depending on navbar height --> 
<div class="container body-content" style="margin-top:80px"> 
    @RenderBody() 
    <hr /> 
    <footer> 
     <p>Copyright &copy; @DateTime.Now.Year - IdeaCon All Rights Reserved</p> 
     <p></p> 
    </footer> 
</div> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script>

來源

2014-06-22 RXC

您可以通過此檢查文檔準備功能高度：

var heightSlider = $('.navbar').height();

然後申請相同的邊距，像這樣：

$('.body-content').css({ marginTop : heightSlider + 30 + 'px' });

希望可以幫到

來源

2014-06-23 00:19:09 roofdog

根據導航欄高度調整佈局文件中的頂部邊距

回答

相關問題