如何在最大宽度上增加 Bootstrap 容器的宽度？

Question

我已将 DataTable 放置在容器类型的 Bootstrap div 中。当我在浏览器的最大宽度上运行网站时，表格的容器会添加一个滚动条并切断表格中的最后一列。

我确实按照 此处 的建议尝试使用 container-fluid div 类型，但这会进一步减小表格容器的宽度。

在检查元素时，似乎周围的 container body-content 继承自布局页面，在表格容器的左侧和右侧添加边距：

一种可能的解决方案我正在考虑是否要减少最大宽度上继承的 container body-content 的边距，但我不确定如何通过 CSS 做到这一点。

从下面的屏幕截图中，您可以看到 Delete col 被截断了，尽管表格的边缘有大量空白需要扩展：

题：

如何在最大宽度上增加 Bootstrap 容器的宽度？

表格容器标记要点：

 <div class="container">

    <div class="form-group">
        <div class="table-responsive">
            <div class="table-responsive" id="datatable-wrapper">

                <table id="escalation" class="table table-striped table-bordered" cellspacing="0">
                    <thead>
                        <tr>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">ID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Application</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">UID</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Type</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Status</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Statement</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Created</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Updated</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Last Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Next Update</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Root Cause</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Details</th>
                            <th style="font-size: 12px; border-right: 1px solid #7591ac; ">Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (HP.ESCALATION.Web.Models.Escalation item in Model)
                        {

                            <tr>
                                <td>@item.ID</td>
                                <td>@item.Application</td>
                                <td class="td-limit">@item.EM</td>
                                <td class="td-limit">@item.Event</td>
                                <td class="td-limit">@item.status</td>
                                <td class="td-limit">@item.Statement</td>
                                <td class="td-limit">@item.Created</td>
                                <td class="td-limit">@item.Updated</td>
                                <td data-order="@item.UnixTimeStamp" class="td-limit">@item.UpdatedTime</td>
                                <td class="td-limit">@item.NextUpdate</td>
                                <td class="td-limit">@item.RootCause</td>
                                @* Add CRUD buttons to each table row --> *@
                                <td><button type="submit" style="background-color: #0CA281;" class="btn btn-success details">Details</button></td>
                                <td><button type="submit" class="btn btn-danger delete">Delete</button></td>
                            </tr>

                        }

                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>

布局容器要点：

 <div class="container body-content" style="margin-top: 90px; margin-bottom: 70px;">

                @* Main Content Render *@
                <div id="content">
                    <div class="content-wrapper main-content clear-fix">

                    </div>
                    @RenderSection("featured", required: false)
                    <section class="content-wrapper main-content clear-fix">
                        @RenderBody()
                    </section>
                </div>

            </div>

原文由 Brian Var 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在这种情况下有效并且仍然允许容器在较小的分辨率下调整大小的解决方案是使用@media 定位 CSS：

 @media only screen and (min-width : 1200px) {

    .container { width: 1500px; }

}

原文由 Brian Var 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以上答案都不是好的解决方案。您可以通过创建一个新的 _project_variables.scss 轻松更改引导程序的变量，并在引导程序之前将其导入您的主 scss 文件中。例如：

 // Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1280px
) !default;

原文由 Keith Mifsud 发布，翻译遵循 CC BY-SA 4.0 许可协议