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

【问题标题】：How to increase width of Bootstrap container on Max width?如何在最大宽度上增加 Bootstrap 容器的宽度？
【发布时间】：2016-11-23 15:00:03
【问题描述】：

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

我确实按照here 的建议尝试使用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>

【问题讨论】：

你能在这里放一个小提琴或任何链接吗？

标签： html css twitter-bootstrap containers contentsize

【解决方案1】：

要增加容器的宽度，使用 css 定位容器：

.container{
   max-width: 1400px; //Or whatever value you need
}

您可以使用媒体查询来指定此样式也将应用哪些断点

【讨论】：

【解决方案2】：

我正在考虑的一种可能的解决方案是减少在最大宽度上继承容器正文内容，但我不知道如何通过 CSS 做到这一点。

尝试将以下内容添加到您的 CSS 中

.container.body-content{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

如果没有可用的演示来测试它，很难判断这是否足够好，或者是否需要改进。

祝你好运！

【讨论】：

【解决方案3】：

您可以覆盖引导 css，将容器的 css 添加为

.container { width: 1400px; } 

make sure this css file is added after the bootstrap css

【讨论】：

我只希望表格容器在浏览器最大化时的最大宽度为 1400 像素。目前，当浏览器大小小于最大值时，此代码 ^ 不允许容器调整大小。
你可以设置 max-width:1400px 和 width:100% .. 所以当你的浏览器最小化时，你的宽度会根据情况调整。如果您的浏览器最大宽度超过 1400 像素，容器将不再扩展

【解决方案4】：

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

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

    .container { width: 1500px; } 

}

【讨论】：

虽然这是一个可以接受的答案，但正确的答案是用 Sass 改变这些值（查看@Keith Mifsud 答案）

【解决方案5】：

以上答案都不是好的解决方案。您可以通过创建新的 _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;

【讨论】：

我很高兴@SteveBauman。如果您不知道..您还可以向数组添加更多大小。由于高分辨率 27 英寸 Mac，我最近开始这样做。我添加 xxl: 1960px 等。您还需要向 $grid-breakpoints 数组添加值。
你如何定义网格断点数组？看起来价值比率是任意的？

【解决方案6】：

在 Bootstrap 4 中使用：

@media only screen and (min-width : 1200px) {
    .container { max-width: 1500px; }
}

【讨论】：

如果需要，请确保使用 CSS 特异性。否则将应用默认样式。

【解决方案7】：

据此：“https://developer.mozilla.org/en-US/docs/Web/CSS/max-width”-“无”可用，我认为在 Bootstrap 中效果更好：

@media only screen and (min-width : 1200px) {
    .container { max-width: none; }
}

【讨论】：

【解决方案8】：

我也需要我的超大屏幕，所以我在下面添加。

/* large devices */
@media (min-width: 1200px) {
  .container {
     max-width: 1200px;
   }
}
/* extra large devices */
@media screen and (min-width: 1800px) {
  .container {
    max-width: 1800px;
  }
}

【讨论】：

【解决方案9】：

对于使用 Sass 的 Bootstrap 4

@include media-breakpoint-up(xl) {
    .container {
        max-width: 1440px;
    }
}

享受吧！

【讨论】：

【解决方案10】：

我想分享一个关于如何使引导容器类的行为类似于“max-width: none;”的想法。（以防您不需要视口溢出）

如果您将引导程序“$container-max-widths”变量设置为大于或等于“$grid-breakpoints”变量，它们的工作方式类似于“max-width:none;”

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1230px,
    xxl: 1400px
);

$container-max-widths: (
    sm: 576px,
    md: 768px,
    lg: 1258px,
    xl: 1259px,
    xxl: 1260px
);

结果：

@media (min-width: 768px)
.container, .container-md, .container-sm {
    max-width: 768px;
}

【讨论】：