Как использовать всю ширину браузера или почему нельзя использовать всю ширину браузера

Question

Я использую boostrap 3, asp mvc, и мне нужно использовать полную ширину браузера.

Слева и справа есть пустое место.

Пожалуйста, смотрите это изображение: https://1drv.ms/u/s!AlLZaH7Z2YlNgqkBq_uE_RHB5G1Yjw

Как использовать всю ширину экрана

Большое спасибо!.

Это HTML-код (cshtml), я не уверен, есть ли что-то, что я должен предоставитьчтобы понять проблему.Пожалуйста, не стесняйтесь спрашивать более подробную информацию.

@model IEnumerable<PftWeb.Models.Cargo>
@using PftWeb.Models

@{
    ViewBag.Title = "Listado de Cargos";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="panel panel-primary">
    <div class="panel-heading">
        Listado de cargos
    </div>

    <table id="TableList" class="table table-striped">
        <thead>
            <tr>
                <th>

                    @Html.DisplayNameFor(model => model.Descripcion)

                </th>

                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Descripcion)
                    </td>

                    <td>
                        @using (Html.BeginForm("Delete", "Cargos", new { id = item.CargoId }))
                        {
                            @Html.ActionLink("Editar", "Edit", new { id = item.CargoId }, new { @class = "btn btn-primary btn-xs" })
                            @Html.ActionLink("Eliminar", "Delete", new { id = item.CargoId }, new { @class = "btn btn-danger btn-xs" })
                        }

                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
@Html.ActionLink("Crear nuevo Cargo", "Create", null, new { @class = "btn btn-primary" })

<script>
    var datatable;
    $(document).ready(function () {

        dataTable = $('#TableList').removeAttr('width').DataTable(
      {
          "language": {
              "sProcessing": "Procesando...",
              "sLengthMenu": "Mostrar _MENU_ registros",
              "sZeroRecords": "No se encontraron resultados",
              "sEmptyTable": "No hay elementos aun...",
              "sInfo": "",
              "sInfoEmpty": "",
              "sInfoFiltered": "",
              "sInfoPostFix": "",
              "sSearch": "Buscar:",
              "sUrl": "",
              "sInfoThousands": ",",
              "sLoadingRecords": "Cargando...",
              "oPaginate": {
                  "sFirst": "Primero",
                  "sLast": "Último",
                  "sNext": "Siguiente",
                  "sPrevious": "Anterior"
              },
              "oAria": {
                  "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                  "sSortDescending": ": Activar para ordenar la columna de manera descendente"
              }
          },
          "autoWidth": true,
          paging: true,
          searching: true,
          "ordering": true,
          "order": [[0, "asc"]],
          columns: [

              {

                  orderable: true,
                  searchable: true
              },

               {
                   orderable: false, searchable: false
               }
          ]

      });

    });
</script>

Answer 1

В представлении _layout, которое охватывает другие представления, вы увидите div с классом container, который оборачивает вызов в RenderBody().Класс container добавляет поля к представлению, которое вы отображаете по умолчанию.

Если вы удалите класс container из упаковочного элемента div, эти поля исчезнут.

Answer 2

С BS 3 вы обычно размещаете свой контент в контейнере, Row, а затем Column (CRC).

https://getbootstrap.com/docs/3.3/css/#grid

Это устанавливает поле влево / вправо дляправильные значения.Попробуйте разместить таблицу в строке, а затем в столбце.Что-то вроде:

<div class="row"><div class="col-xs-12">Your table</div></div>