截图:
我的共享_Layout Razor视图如下所示:
@using FCTech.Quotes.Helpers<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="utf-8" /> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1"> <Title>@VIEwBag.Title</Title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <Meta name="vIEwport" content="wIDth=device-wIDth" /> @Styles.Render("~/Content/CSS") @Styles.Render("~/Content/themes/base/CSS") @Styles.Render("~/Content/bootstrap") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("Styles",false)</head><body> <header> <div > <div> <nav > <div > <div > <button type="button" data-toggle="collapse" data-target="#navlinks" aria-expanded="false"> <span >Toggle navigation</span> <span ></span> <span ></span> <span ></span> </button> @HTML.Actionlink("Home","Index",new { controller = "Home" },new { @class = "logo navbar-brand" }) </div> <div ID="navlinks"> <ul > <li>@HTML.Actionlink("Home","Home")</li> @if (httpContext.Current.User.IDentity.IsAuthenticated) { <li>@HTML.Actionlink("Quotes",new {controller = "Quotes",salesPerson = AccountHelper.GetCurrentUserFullname()})</li> <li>@HTML.Actionlink("Orders",new {controller = "Orders",salesPerson = AccountHelper.GetCurrentUserFullname()})</li> } @if (httpContext.Current.User.IDentity.IsAuthenticated && AccountHelper.Authorizeadmin()) { <li>@HTML.Actionlink("Shipments","ShipmentSummary",new { controller = "admin",salesPerson = AccountHelper.GetCurrentUserFullname() })</li> <li>@HTML.Actionlink("Bookings","BookingSummary",salesPerson = AccountHelper.GetCurrentUserFullname() })</li> } <li> @if (Request.IsAuthenticated) { @HTML.Actionlink("Log Off","logoff","Account") } else { @HTML.Actionlink("Log in","Login","Account") } </li> </ul> </div> </div> </nav> </div> </div> </header> <div ID="body" > @RenderSection("featured",required: false) <section > @RenderBody() </section> </div> <footer> <div > <div > <p>v @typeof(FCTech.Quotes.MvcApplication).Assembly.Getname().Version</p> </div> </div> </footer> @Scripts.Render("~/bundles/bootstrap") @RenderSection("Scripts",required: false)</body></HTML>
而正确显示的其中一个视图的正文如下所示:
@using System.linq@model IEnumerable<FCTech.Quotes.Models.OpenQuoteModel>@{ VIEwBag.Title = "Open Quotes";}<head> <Title> Open Quotes </Title></head><fIEldset> <legend> Open Quotes </legend> @if (Model != null && Model.Any()) { <table ID="OpenQuotestable" > <thead> <tr > <th> @HTML.displaynameFor(model => model.QuoteNumber) </th> <th> @HTML.displaynameFor(model => model.QuoteDate) </th> <th> @HTML.displaynameFor(model => model.Customer) </th> <th> @HTML.displaynameFor(model => model.City) </th> <th> @HTML.displaynameFor(model => model.State) </th> <th> @HTML.displaynameFor(model => model.EndUser) </th> <th> @HTML.displaynameFor(model => model.Product) </th> <th> @HTML.displaynameFor(model => model.TotalValue) </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr red" : string.Empty ) "> <td> @HTML.Actionlink(item.QuoteNumber.ToString(),"Detail",new { quoteNumber = item.QuoteNumber,productline = item.Product,salesRep = item.SalesRep }) </td> <td > @HTML.displayFor(model => item.QuoteDate) </td> <td> @HTML.displayFor(model => item.Customer) </td> <td> @HTML.displayFor(model => item.City) </td> <td> @HTML.displayFor(model => item.State) </td> <td> @HTML.displayFor(model => item.EndUser) </td> <td> @HTML.displayFor(model => item.Product) </td> <td > @HTML.displayFor(model => item.TotalValue) </td> </tr> } </tbody> </table> }</fIEldset>@section Scripts { @Scripts.Render("~/bundles/jqueryval")}
我在这里做错了什么?
解决方法 在bootstrap 3中,您应该将表格标签包装成一个.table响应的div.<div > <table > </table></div>
http://getbootstrap.com/css/#tables-responsive
总结以上是内存溢出为你收集整理的html – Bootstrap导航栏在具有表格的页面上太短全部内容,希望文章能够帮你解决html – Bootstrap导航栏在具有表格的页面上太短所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)