Панель навигации Bootstrap слишком короткая на страницах со столом

У меня есть мобильное веб-приложение, которое использует Bootstrap. Все выглядит нормально на рабочем столе; однако, когда я подтягиваю определенные страницы на iPhone 4S, навигационная панель намного уже, чем должна быть. Обе страницы, которые имеют это поведение, имеют таблицы, поэтому они могут иметь какое-то отношение к ней.

Снимок экрана: here

Мой общий _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")
}

Что я здесь делаю неправильно?

ОТВЕТЫ

Ответ 1

В Bootstrap 3 вы должны обернуть свой тег таблицы в .table-responsive div.

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

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

Ответ 2

Чтобы расширить ответ Сэмюэля,

Похоже, это происходит просто потому, что запрос на загрузку Bootstrap на этом мобильном уровне имеет максимальную ширину без скрытого переполнения, а содержимое таблицы превышает эту ширину. Мобильные таблицы всегда являются болью для интерфейсных разработчиков.

Помимо решения, предоставленного Samuel, вы всегда можете сделать свой собственный мультимедийный запрос для отображения данных более чистым способом.

Лично я предлагаю использовать jQuery DataTables для форматирования отображения. DataTables обеспечивает обработку меньших устройств. Таблицы данных Отзывчивый пример

После добавления плагина DataTables и datatables, реагирующих на ваш проект, инициализируйте его следующим свойством:

$(document).ready(function() {

    $('#OpenQuotesTable').DataTable( {

        responsive: true

    } );

} );