带有表格的页面上的引导导航栏太短

Question

我有一个使用 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 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>

其中一个显示不正确的视图的主体如下所示：

@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")
}

我在这里做错了什么？

Answer 1

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

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

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

Answer 2

为了扩展塞缪尔的回答，

这看起来很简单，因为在该移动级别的 Bootstrap 媒体查询有一个最大宽度，没有隐藏的溢出，而表格内容超过了这个宽度。 移动表格对于前端开发人员来说总是很痛苦。

除了 Samuel 提供的解决方案之外，您始终可以进行自己的自定义媒体查询，以更简洁的方式显示数据。

就个人而言，我建议使用 jQuery DataTables 进行显示格式设置。 DataTables 为较小的设备提供处理。 DataTables Responsive example

在为您的项目添加 DataTables 插件和数据表后，使用此属性对其进行初始化，如下所示：

$(document).ready(function() {

    $('#OpenQuotesTable').DataTable( {

        responsive: true

    } );

} );