html – Bootstrap导航栏在具有表格的页面上太短

html – Bootstrap导航栏在具有表格的页面上太短,第1张

概述我有一个使用Bootstrap的移动网络应用程序.桌面上的一切看起来都很好然而,当我在iPhone 4S上拉出某些页面时,导航栏比它应该更窄.这两个具有此行为的页面都有表格,因此可能与之有关. 截图: 我的共享_Layout Razor视图如下所示: @using FCTech.Quotes.Helpers<!DOCTYPE html><html lang="en"><head> < 我有一个使用bootstrap的移动网络应用程序.桌面上的一切看起来都很好然而,当我在iPhone 4S上拉出某些页面时,导航栏比它应该更窄.这两个具有此行为的页面都有表格,因此可能与之有关.

截图:

我的共享_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导航栏在具有表格的页面上太短所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1131986.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存