Twitter bootstrap asp.net中带UpdatePanel部分呈现的引导css_Twitter Bootstrap

Twitter bootstrap asp.net中带UpdatePanel部分呈现的引导css

twitter-bootstrap

Twitter bootstrap asp.net中带UpdatePanel部分呈现的引导css,twitter-bootstrap,Twitter Bootstrap,我在我的ASP.NET应用程序中使用的是Bootstrap Twitter风格，具有主内容体系结构（代码如下）。第一次加载时，一切正常，两个span6 div并排，顶部菜单正常。。我检查了@media style，两个div都可以。当任何更新面板执行部分渲染时（单击左侧更新面板中的树），所有内容都会更改。主要的，我认为关键的问题是现在@media被改变了（现在是@media（最大宽度：767px），更新之前是@media（最小宽度：1200px））。当您在平板电脑或某些小分辨率中打开时，宽监视器

我在我的ASP.NET应用程序中使用的是Bootstrap Twitter风格，具有主内容体系结构（代码如下）。第一次加载时，一切正常，两个span6 div并排，顶部菜单正常。。我检查了@media style，两个div都可以。当任何更新面板执行部分渲染时（单击左侧更新面板中的树），所有内容都会更改。主要的，我认为关键的问题是现在@media被改变了（现在是@media（最大宽度：767px），更新之前是@media（最小宽度：1200px））。当您在平板电脑或某些小分辨率中打开时，宽监视器中的显示页面会发生变化，而这仅发生在“更新”面板的部分渲染中。有没有人有过这类错误的经验

主代码：

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head id="Head1" runat="server">   
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Web Client</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Le styles -->
    <link rel="stylesheet" href="../assets/css/bootstrap.css" media="all" />

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="../assets/js/html5shiv.js" ></script>
    <![endif]-->
    <script src="../assets/js/modernizr-2.5.3-respond-1.1.0.min.js"></script>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="~/assets/ico/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/assets/ico/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/assets/ico/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/assets/ico/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="~/assets/ico/apple-touch-icon-57-precomposed.png" />

<asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    <form id="mainForm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" AsyncPostBackTimeout="360000">
        <Scripts>
            <asp:ScriptReference Path="~/assets/js/jquery-1.7.2.min.js" />
             <asp:ScriptReference Path="~/assets/js/bootstrap/bootstrap.min.js" />
            <asp:ScriptReference Path="~/assets/js/bootstrap/dropdown.js" />
            <asp:ScriptReference Path="~/assets/js/bootstrap/tab.js" />
            <asp:ScriptReference Path="~/assets/js/bootstrap/button.js" />
            <asp:ScriptReference Path="~/assets/js/bootstrap/tooltip.js" />
            <asp:ScriptReference Path="~/assets/js/bootstrap/modal.js" />
            <asp:ScriptReference Path="~/JS/Safari3AjaxHack.js" />
            <asp:ScriptReference Path="~/js/default.js" />
            <asp:ScriptReference Path="~/JS/LongPolling.js" />
        </Scripts>
    </asp:ScriptManager>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
         <!--TOP MENU CODE-->
        </div>        
      </div>      
    </div>
    <div class="container">
        <div class="row">
            <asp:ContentPlaceHolder ID="DefaultContent" runat="server" />
        </div>
    </div>
    <footer class="footer">        
       <div class="navbar navbar-fixed-bottom">      
           <div class="navbar-inner">
               <div class="container">                  
                   <p class="pull-right">
                        v<%= Application["ShellVersion"] %>&nbsp;  
                       Copyright 2012 All rights reserved.
                   </p>
               </div>
           </div>
       </div>
    </footer>       
</form>
</body>
</html>


网络客户端
或者去体验一下这个网站


您的浏览器不支持iFrame。

我用容器流体引导类修复了这个问题。我用流体选项替换了所有容器和行。

现在它工作正常，我认为它比以前的要好。

我用container fluid引导类修复了这个问题。我用流体选项替换了所有容器和行。

现在它工作正常，我认为它比以前的更好。

即使使用流体，我也会遇到同样的错误，当我删除UpdatePanel时，它工作正常：

<li>
      <asp:UpdatePanel ID="upp" runat="server">
        <ContentTemplate>
         some content
        </ContentTemplate>
      </asp:UpdatePanel>
</li>


一些内容

即使使用流体，我也会遇到同样的错误，当我删除UpdatePanel时，它工作正常：

<li>
      <asp:UpdatePanel ID="upp" runat="server">
        <ContentTemplate>
         some content
        </ContentTemplate>
      </asp:UpdatePanel>
</li>


一些内容