Question

我正在使用materiel css来设计我的应用程序的母版页。我需要将侧边栏的位置设置为左边，以便我可以在内容占位符中使用全宽度内容。下面是母版页的现有图片。我正在使用{ {3}}

预期布局：下面是html布局源代码。

 <form id="form1" runat="server">
    <div class="nav">
        <nav>
                        <div class="nav-wrapper" style="background-color:#0055b7;color:#0055b7;">
                          <a href="#!" class="brand-logo"> <asp:Image CssClass="brand-logo" ID="imglogo" ImageUrl="~/abcLogo.jpg" runat="server" /></a>
                          <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                          <ul class="right hide-on-med-and-down">
                            <li><asp:LinkButton runat="server" ID="lnkdff" PostBackUrl="~/Policy.aspx" >Policy</asp:LinkButton></li>
                            <li><asp:LinkButton runat="server" ID="LinkButton1" PostBackUrl="~/Support.aspx" >Support</asp:LinkButton></li>
                            <li style="text-transform:uppercase; color:White;"><span style="color:White">
                            Welcome <asp:Label ID="lblLoginName" runat="server" Text="RGR"></asp:Label>
                    </li>
                    <li style="text-transform:uppercase;">
                       <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/wtsLogin.aspx"  />
                    </li>

                          </ul>
                          <ul class="side-nav" id="mobile-demo">
                            <li><a href="wtsPolicy.aspx">Policy</a></li>
                            <li><a href="Support.aspx">Support</a></li>
                          </ul>
                        </div>
                </nav>
    </div>
    <div class="container ">
        <!-- Page Layout here -->
        <div class="row">
            <div class="col s3">
                <ul class="collection with-header">
                    <li class="collection-header"><b>TimeSheet Section</b></li>
                    <li class="collection-item" id="CreateLI" runat="server">
                        <asp:LinkButton runat="server" ID="LinkCreateButton" PostBackUrl="~/TimeSheet/TimeSheet.aspx">Create TimeSheet</asp:LinkButton>
                    </li>
                    <li class="collection-item">
                        <asp:LinkButton runat="server" ID="LinkEditButton" PostBackUrl="~/TimeSheet/PrevTimeSheetTest.aspx">View/Edit</asp:LinkButton></li>
                </ul>
                <ul class="collection with-header">
                    <li class="collection-header"><b>Approvals Section</b></li>
                    <li class="collection-item">
                        <asp:LinkButton runat="server" ID="LinkButton2" PostBackUrl="~/Approval/Timesheet2Approve.aspx">To Be Approved</asp:LinkButton></li>
                    <li class="collection-item">
                        <asp:LinkButton runat="server" ID="LinkButton3" PostBackUrl="~/Approval/ApprovedTimeSheet.aspx">Approved</asp:LinkButton></li>
                </ul>
                <ul class="collection with-header">
                    <li class="collection-header"><b>Reports Section</b></li>
                    <li class="collection-item">
                        <asp:LinkButton runat="server" ID="LinkJobCostingButton" PostBackUrl="~/Reports/JobCostingReport.aspx">Job Costing</asp:LinkButton></li>
                </ul>
            </div>
            <div class="col s9">
                <div class="row">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </div>
    </div>
    </form>

Answer 1

您使用的.container类使窗口宽度达到70％，请尝试删除container类。

Link for reference

materializecss.com：左侧边栏位置问题

1 个答案: