如何在最大宽度上增加 Bootstrap 容器的宽度？
How to increase width of Bootstrap container on Max width?
我在 Bootstrap div 类型的容器中放置了一个 DataTable。当我 运行 网站在浏览器的最大宽度上时 table 的容器添加了一个滚动条并切断了 table.
中的最后一列
我确实尝试按照建议使用 container-fluid div 类型 here 但这会进一步减小 table 容器的宽度。
在检查元素时，似乎围绕 container body-content 从布局页面继承的元素在 table 容器的左侧和右侧添加了边距：
一个可能的解决方案我正在考虑是否减少继承的 container body-content 在最大宽度上的边距，但我不确定如何通过 CSS.[=20= 做到这一点]
从下面的屏幕截图中您可以看到删除列被截断了，尽管 table 的空白枯萎边有很多要扩展：
问题：
如何在最大宽度上增加 Bootstrap 容器的宽度？
table 容器标记的要点：
<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>
要增加容器的宽度，请将容器设为 css:
.container{
max-width: 1400px; //Or whatever value you need
}
您可以使用媒体查询来指定此样式也适用的断点
One possible solution I'm thinking if to decrease the margin of the
inherited container body-content on max width, but I'm not sure how to
do that via CSS.
尝试将以下内容添加到您的 CSS
.container.body-content{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
如果没有工作演示来测试它，很难判断它是否足够好，或者是否需要改进。
祝你好运！
您可以覆盖 bootstrap css，方法是为容器添加 css 作为
.container { width: 1400px; }
make sure this css file is added after the bootstrap css
在这种情况下有效并且仍然允许容器在较小的分辨率下调整大小的解决方案是使用@media:
定位 CSS
@media only screen and (min-width : 1200px) {
.container { width: 1500px; }
}
None 以上答案都是很好的解决方案。您可以通过创建一个新的 _project_variables.scss 并在主 scss 文件中的 bootstrap 之前导入它来轻松更改 bootstrap 的变量。例如：
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1280px
) !default;
在Bootstrap4中使用：
@media only screen and (min-width : 1200px) {
.container { max-width: 1500px; }
}
据此：“https://developer.mozilla.org/en-US/docs/Web/CSS/max-width”- "none" 可用，在 Bootstrap 我认为效果更好：
@media only screen and (min-width : 1200px) {
.container { max-width: none; }
}
我也需要在超大屏幕上工作，所以我在下面添加了。
/* large devices */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
/* extra large devices */
@media screen and (min-width: 1800px) {
.container {
max-width: 1800px;
}
}
对于 Bootstrap 4 使用 Sass 人
@include media-breakpoint-up(xl) {
.container {
max-width: 1440px;
}
}
尽情享受吧！
我想分享一个关于如何使 bootstrap 容器 class 的行为类似于“最大宽度：none;”的想法。 （如果您不需要视口溢出）
如果您设置 bootstrap“$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;
}
我在 Bootstrap div 类型的容器中放置了一个 DataTable。当我 运行 网站在浏览器的最大宽度上时 table 的容器添加了一个滚动条并切断了 table.
中的最后一列我确实尝试按照建议使用 container-fluid div 类型 here 但这会进一步减小 table 容器的宽度。
在检查元素时，似乎围绕 container body-content 从布局页面继承的元素在 table 容器的左侧和右侧添加了边距：
一个可能的解决方案我正在考虑是否减少继承的 container body-content 在最大宽度上的边距，但我不确定如何通过 CSS.[=20= 做到这一点]
从下面的屏幕截图中您可以看到删除列被截断了，尽管 table 的空白枯萎边有很多要扩展：
问题：
如何在最大宽度上增加 Bootstrap 容器的宽度？
table 容器标记的要点：
<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>
要增加容器的宽度，请将容器设为 css:
.container{
max-width: 1400px; //Or whatever value you need
}
您可以使用媒体查询来指定此样式也适用的断点
One possible solution I'm thinking if to decrease the margin of the inherited container body-content on max width, but I'm not sure how to do that via CSS.
尝试将以下内容添加到您的 CSS
.container.body-content{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
如果没有工作演示来测试它，很难判断它是否足够好，或者是否需要改进。
祝你好运！
您可以覆盖 bootstrap css，方法是为容器添加 css 作为
.container { width: 1400px; }
make sure this css file is added after the bootstrap css
在这种情况下有效并且仍然允许容器在较小的分辨率下调整大小的解决方案是使用@media:
定位 CSS@media only screen and (min-width : 1200px) {
.container { width: 1500px; }
}
None 以上答案都是很好的解决方案。您可以通过创建一个新的 _project_variables.scss 并在主 scss 文件中的 bootstrap 之前导入它来轻松更改 bootstrap 的变量。例如：
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1280px
) !default;
在Bootstrap4中使用：
@media only screen and (min-width : 1200px) {
.container { max-width: 1500px; }
}
据此：“https://developer.mozilla.org/en-US/docs/Web/CSS/max-width”- "none" 可用，在 Bootstrap 我认为效果更好：
@media only screen and (min-width : 1200px) {
.container { max-width: none; }
}
我也需要在超大屏幕上工作，所以我在下面添加了。
/* large devices */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
/* extra large devices */
@media screen and (min-width: 1800px) {
.container {
max-width: 1800px;
}
}
对于 Bootstrap 4 使用 Sass 人
@include media-breakpoint-up(xl) {
.container {
max-width: 1440px;
}
}
尽情享受吧！
我想分享一个关于如何使 bootstrap 容器 class 的行为类似于“最大宽度：none;”的想法。 （如果您不需要视口溢出）
如果您设置 bootstrap“$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;
}