マスター コンテンツ アーキテクチャ (以下のコード) を使用して、ASP.NET アプリケーションで Bootstrap-Twitter スタイルを使用しています。最初の読み込みでは、すべて問題ありません。2 つの span6 div が並んでいて、トップ メニューは通常です。@media スタイルをチェックしたところ、両方の 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"] %>
Copyright 2012 All rights reserved.
</p>
</div>
</div>
</div>
</footer>
</form>
</body>
</html>
コンテンツ コード:
<asp:Content ID="content" ContentPlaceHolderID="DefaultContent" Runat="Server">
<div class="span6">
<div class="well">
<asp:UpdatePanel ID="upLeft" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TreeView ID="tree" runat="server" OnTreeNodePopulate="tree_TreeNodePopulate"
ExpandDepth="1" NodeWrap="true" OnSelectedNodeChanged="tree_SelectedNodeChanged"
SelectedNodeStyle-BackColor="#000066" SelectedNodeStyle-ForeColor="#FFFFFF" />
<link rel="stylesheet" href="../assets/css/bootstrap.css" media="all" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ibtnExpand" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ibtnCollapse" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ibtnRefresh" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div class="span6">
<asp:UpdatePanel ID="upRight" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div runat="server" id="rightDIV">
<ul class="nav nav-tabs" id="browseTab">
<li class="active"><a href="#recordTab" data-toggle="tab"><%= GetStaticTabTitle() %></a></li>
<asp:Repeater ID="rptTabs" runat="server">
<ItemTemplate>
<%# GetTabCommand(Container.DataItem) %>
</ItemTemplate>
</asp:Repeater>
</ul>
<div class="tab-content" style="overflow: visible;" id="rightTabs">
<uc:RecordInfo ID="recordDetailsInfo" runat="server" />
<div class="tab-pane active" id="recordTab">
<uc:Record ID="Details" runat="server" />
<uc:Files ID="Files" runat="server" />
<uc:Agenda ID="Agenda" runat="server" />
<uc:Section ID="Section" runat="server" />
<uc:Item ID="Item" runat="server" />
<asp:Panel ID="panelFiles" runat="server" Style="height: 300px; padding-bottom: 60px; margin-left: 0; padding-left: 0;"
CssClass="span6">
<iframe name="ifrmFiles" seamless="seamless" id="ifrmFiles" src="" runat="server"
class="span6" style="height: 295px; margin-left: 0; padding-left: 0; border: 0 none #ffffff; background: #ffffff url('../Images/file-loader.gif') no-repeat 5% 5%;">Your browser doesn't support iframes.</iframe>
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>