0

我的 webapp 中有一个页面并排包含 3 个文本框，因为它们都显示重要信息。但是，如果我要减小浏览器的大小，我的 twitter 引导导航栏和幻灯片标题将遵循浏览器的大小并适合 100%，如我的代码中所述

<div id="Slideshow">
<img src="image/s1.jpg" name="slide" style="width:100%; height:150%">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
    document.images.slide.src = eval("image" + step + ".src")
    if (step < 5)
        step++
    else
        step = 1
    setTimeout("slideit()", 2500)
}
slideit()
//-->
</script>
</div>

<div id="twitterbootstrap">
<div class="navbar navbar-inverse 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>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">iPolice's Menu</a>
        <div class="nav-collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="AdminAddAccount.aspx">AddAccount</a></li>
                <li class="divider-vertical"></li>
                <li><a href="AdminDropAccount.aspx">Drop Account</a></li>
                <li class="divider-vertical"></li>
                <li><a href="AdminEditProfile.aspx">Edit Account</a></li>
                <li class="divider-vertical"></li>
                <li><a href="AdminColdStorage.aspx">Cold Account</a></li>
                <li class="divider-vertical"></li>
                <li><a href="AdminReportCheck.aspx">Report Check</a></li>
                <li class="divider-vertical"></li>
                <li><a href="AdminLogout.aspx">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

如您所见，我将幻灯片设置为宽度：100%。但是对于我的表格和文本框，就是这样

<table width="100%">
        <tr>

            <td id="admintaskdetail">
                <b>Details </b>
                <asp:TextBox ID="tbdetails" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
            </td>

            <td id="admintaskpropertydetail">
                <b>Property Details:</b>
                <asp:TextBox ID="tbproperty" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
            </td>



            <td id="admintasksuspectdetail">
                <b>Suspect Details:</b>
                <asp:TextBox ID="tbsuspect" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
            </td>


        </tr>
    </table>

不幸的是，这就是我的网站的外观。我的导航栏和幻灯片的宽度完全相同。

在此处输入图像描述

为了解决这个问题，我尝试将导航栏、标题和内容包装在一个名为 wrapper 的 id 下，这样的代码也不起作用

#wrapper {
width:80%;
overflow:scroll;
margin: 0 auto;
}

我可以知道如何为我的网站设置最大宽度然后在最大宽度之后使溢出部分可滚动的正确方法吗？我希望让我的导航栏和 twitterbootstrap 导航栏在特定宽度后停止跟随浏览器，方法是将它们包装在一个也不起作用的包装器 id 下。

问候。

试了好几天还是没能弄出来。

4

1 回答 1

1

您可以将面板控件与 ScrollBars 一起使用

    <asp:Panel ID="Panel1" runat="server" Width="100%" ScrollBars="Both">

<table width="100%">
    <tr>

        <td id="admintaskdetail">
            <b>Details </b>
            <asp:TextBox ID="tbdetails" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
        </td>
        <td id="admintaskpropertydetail">
            <b>Property Details:</b>
            <asp:TextBox ID="tbproperty" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
        </td>
        <td id="admintasksuspectdetail">
            <b>Suspect Details:</b>
            <asp:TextBox ID="tbsuspect" runat="server" Height="120px" TextMode="MultiLine" Width="400px" ReadOnly="True"></asp:TextBox>
        </td>
    </tr>
</table>
</asp:Panel>
于 2013-08-27T01:45:33.010 回答