Html 如何在最大宽度上增加 Bootstrap 容器的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38480156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase width of Bootstrap container on Max width?
提问by Brian J
I've placed a DataTablewithin a Bootstrap div of type container. When I run the website on the browser's max width the container for the table adds a scrollbar and cuts off the last column in the table.
我在类型为容器的 Bootstrap div 中放置了一个DataTable。当我在浏览器的最大宽度上运行网站时，表格的容器会添加一个滚动条并切断表格中的最后一列。
I did try using a container-fluiddiv type as suggested herebut this decreases the width of the tables's container even further.
我确实尝试使用此处container-fluid建议的div 类型，但这会进一步减小表格容器的宽度。
On inspecting the element it seems that surrounding container body-contentinherited form the layout page is adding a margin on the left and right side of the table container:
在检查元素时，container body-content布局页面周围的继承形式似乎在表格容器的左侧和右侧添加了一个边距：
One possible solution I'm thinking if to decrease the margin of the inherited container body-contenton max width, but I'm not sure how to do that via CSS.
一种可能的解决方案，我在考虑是否减少container body-content最大宽度上继承的边距，但我不确定如何通过 CSS 做到这一点。
From the screenshot below you can see that the Delete col is being cut off although there is plenty of whitespace wither side of the table to expand:
从下面的屏幕截图中，您可以看到删除列被截断，尽管表格的枯萎侧有很多空白要展开：
Question:
题：
How can you increase width of a Bootstrap container on Max width?
如何在最大宽度上增加 Bootstrap 容器的宽度？
Gist of table container markup:
表容器标记要点：
<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>
Gist of Layout container:
布局容器的要点：
<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>
采纳答案by Brian J
The solution that worked in this case and still allowed the container to resize on smaller resolutions, was to target the CSS using @media:
在这种情况下仍然允许容器在较小分辨率下调整大小的解决方案是使用 @media 定位 CSS：
@media only screen and (min-width : 1200px) {
.container { width: 1500px; }
}
回答by Keith Mifsud
None of the answers above are good solutions. You can easily change bootstrap's variables by creating a new _project_variables.scss and import it before bootstrap in your main scss file. For example:
以上答案都不是很好的解决方案。您可以通过创建新的 _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;
回答by Keith Turkowski
In Bootstrap 4 use:
在 Bootstrap 4 中使用：
@media only screen and (min-width : 1200px) {
.container { max-width: 1500px; }
}
回答by il0v3d0g
I needed mine to work with an extra large screen as well, so I added below.
我也需要使用超大屏幕来工作，所以我在下面添加了。
/* large devices */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
/* extra large devices */
@media screen and (min-width: 1800px) {
.container {
max-width: 1800px;
}
}
回答by Manikandan
You can override the bootstrap css, by adding the css for container as
您可以通过将容器的 css 添加为
.container { width: 1400px; }
make sure this css file is added after the bootstrap css
回答by JT91
To increase the width of the container target the container with css:
要使用 css 增加容器目标容器的宽度：
.container{
max-width: 1400px; //Or whatever value you need
}
You can use media queries to specify what breakpoints this style will apply too
您可以使用媒体查询来指定此样式也将应用的断点
回答by David Taiaroa
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 做到这一点。
Try adding the following to your CSS
尝试将以下内容添加到您的 CSS
.container.body-content{
margin-left:0;
margin-right:0;
padding-left:0;
padding-right:0;
}
Without having a working demo to test this on it's difficult to tell if this will be good enough, or if it would need refinement.
如果没有工作演示来对此进行测试，很难判断这是否足够好，或者是否需要改进。
Good luck!
祝你好运！
回答by gene
According to this: "https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" - "none" is available and in Bootstrap I think works better:
根据这个：“ https://developer.mozilla.org/en-US/docs/Web/CSS/max-width” - “none”可用，我认为在 Bootstrap 中效果更好：
@media only screen and (min-width : 1200px) {
.container { max-width: none; }
}
