materializecss.com：左側欄位置問題

Question

我正在使用materiel css來設計我的應用程序的母版頁。我需要將側欄放置到左側，以便我可以在內容位置holder中使用完整寬度的內容。下面是現有的圖片大師的page.I我使用http://materializecss.com

預計的佈局： 下面是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