个人中心
gpt4 book ai didi

html - Bootstrap 导航栏在带有表格的页面上太短

转载 作者：技术小花猫 更新时间：2023-10-29 10:33:52 25 4
gpt4 key购买 nike

我有一个使用 Bootstrap 的移动网络应用程序。在桌面上一切看起来都很好；但是，当我在 iPhone 4S 上拉出某些页面时，导航栏比应有的窄得多。具有此行为的两个页面都有表格，因此这可能与此有关。

屏幕截图:here

我共享的 _Layout Razor View 如下所示:

@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 class="content-wrapper">
            <div>
                <nav class="navbar navbar-default col-xs-12">
                    <div class="container-fluid">
                        <div class="navbar-header float-left">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navLinks" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            @Html.ActionLink("Home", "Index", new { controller = "Home" }, new { @class = "logo navbar-brand" })
                        </div>

                        <div class="collapse navbar-collapse" id="navLinks">
                            <ul class="nav navbar-nav">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                @if (HttpContext.Current.User.Identity.IsAuthenticated)
                                {
                                    <li>@Html.ActionLink("Quotes", "Index", new {controller = "Quotes", salesPerson = AccountHelper.GetCurrentUserFullName()})</li>
                                    <li>@Html.ActionLink("Orders", "Index", 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", new { controller = "Admin", 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" class="content">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-right">
                <p>v @typeof(FCTech.Quotes.MvcApplication).Assembly.GetName().Version</p>
            </div>
        </div>
    </footer>


    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("Scripts", required: false)

</body>
</html>

其中一个显示不正确的 View 的正文如下所示:

@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" class="table table-responsive table-bordered table-condensed table-striped tablesorter">
            <thead>
                <tr class="header">
                    <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 class="@(item.QuoteDate < DateTime.Today.AddDays(-30) ? "red" : string.Empty ) ">
                        <td>
                            @Html.ActionLink(item.QuoteNumber.ToString(), "Detail", new { quoteNumber = item.QuoteNumber, productLine = item.Product, salesRep = item.SalesRep })
                        </td>
                        <td style="text-align: right;">
                            @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 style="text-align: right;">
                            @Html.DisplayFor(model => item.TotalValue)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }



</fieldset>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我在这里做错了什么？

最佳答案

在 Bootstrap 3 中，您应该将 table 标签包装到 .table-responsive div 中。

<div class="table-responsive">
  <table class="table">
  </table>
</div>

http://getbootstrap.com/css/#tables-responsive

关于html - Bootstrap 导航栏在带有表格的页面上太短，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31417549/

25 4 0
文章推荐： css - 如果我将背景设为半透明，列表编号将变为半透明
文章推荐： css - 使用 ng-class 更改类时， Angular 动画不适用于 ng-show
文章推荐： css - 在 React [FOUC] 中等待 CSS 在 JS 之前加载
文章推荐： ios - 如何像 ALAssetsLibrary 一样使用 PHPhotoLibrary
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com