Default C# ASP.NET nav bar resizing issue

Question

Я новичок в ASP, поэтому я все еще пытаюсь найти меня. Я столкнулся с проблемой, когда панель навигации по умолчанию, входящая в проект, меняет размер по содержимому, если я изменяю ширину окна.

Значение по умолчанию Project: В VS13 создать новый проект ASP.NET Web Forms. Навигация, который поставляется в качестве шаблона с этим проектом, - это то, с чем я смотрел. Просто добавьте еще несколько ссылок на значение по умолчанию, и вы можете увидеть проблему изменения размера, которую я имею.

Я не могу понять, как изменить заполнение содержимого при изменении размера верхней панели навигации.

Примеры:

До:

После:

Как остановить это происходит?

Edit: Код с Site.Master

<form runat="server"> 
     <asp:ScriptManager runat="server"> 
      <Scripts> 
       <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%> 
       <%--Framework Scripts--%> 
       <asp:ScriptReference Name="MsAjaxBundle" /> 
       <asp:ScriptReference Name="jquery" /> 
       <asp:ScriptReference Name="bootstrap" /> 
       <asp:ScriptReference Name="respond" /> 
       <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> 
       <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> 
       <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> 
       <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> 
       <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> 
       <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> 
       <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> 
       <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> 
       <asp:ScriptReference Name="WebFormsBundle" /> 
       <%--Site Scripts--%> 
      </Scripts> 
     </asp:ScriptManager> 

     <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> 
        <a class="navbar-brand" runat="server" href="~/">Winded Warriors</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a runat="server" href="~/">Home</a></li> 
         <li><a runat="server" href="~/Players">Players</a></li> 
         <li><a runat="server" href="~/Stats">Stats</a></li> 
         <li><a runat="server" href="~/MatchHistory">Match History</a></li> 
         <li><a runat="server" href="~/Schedule">Schedule</a></li> 
         <li><a runat="server" href="~/Photos">Photos</a></li> 
         <li><a href="http://www.facebook.com/WindedWarriors"><img src="http://www.windedwarriors.com/facebook-icon.png" height="16"></a> </li> 
         <li><a href="https://www.youtube.com/channel/UCudcTnN9fHNLigUTvmGv_Fg"><img src="http://www.windedwarriors.com/YouTube-icon.png" height="16"></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <!-- why doesnt this not space correctly???? --> 
     <div class="container body-content"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
      </asp:ContentPlaceHolder> 
      <hr /> 
      <footer> 
       <p>&copy; <%: DateTime.Now.Year %> - Winded Warriors Soccer</p> 
      </footer> 
     </div> 
    </form> 

Files: bootstrap.css http://s000.tinyupload.com/?file_id=22346182312171777192 site.css http://s000.tinyupload.com/?file_id=24528713647080441261

Answer 1

Проблема, скорее всего, в том, что есть поплавок не очищается после навигационный div или что навигационный div использует положение: абсолютное.

Не видя html/css, я не могу сказать вам наверняка.

Answer 2

В ASPX присвоить идентификатор первого DIV

<div id="myNavBar" class="navbar navbar-inverse navbar-fixed-top"> 

, то вы можете написать следующий JS

<script type="text/javascript"> 
     function autocollapse() { 
      var navbar = $('#myNavBar'); 
      navbar.removeClass('collapsed'); 
      if (navbar.innerHeight() > 50) 
       navbar.addClass('collapsed'); // collapse mode 
     } 
    $(document).on('ready', autocollapse); 
    $(window).on('resize', autocollapse); 
</script> 

вы можете изменить 50 в navbar.innerHeight() > 50 линии фактической высоты вашего navbar на первом изображении