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

使用BS 3，通常将内容放置在“容器，行然后列”（CRC）中。

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

这会将左右边距设置为正确的值。尝试将表格放在一行中，然后再放在一列中。像这样：

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

Answer 2

在包裹其他视图的XY视图中，您将看到一个_layout类的div，该包裹将对container的调用包裹起来。 RenderBody()类为默认情况下要渲染的视图添加了页边距。

如果从包装div中删除类container，则这些边距将消失。

如何使用所有浏览器的宽度或为什么不能使用所有浏览器的宽度

2 个答案: