引导程序: 如何改变容器的宽度？

我曾经用 Bootstrap 开发过一个带有固定容器类的网站，但是现在客户希望网站的宽度是1000px，而不是1170px。我不用。更少的文件。

有什么快速解决办法吗？

449044 次浏览
小开
最佳答案

转到 Bootstrap 站点上的 定制部分，选择您喜欢的尺寸。您必须设置 @gridColumnWidth和 @gridGutterWidth变量。

例如: @gridColumnWidth = 65px和 @gridGutterWidth = 20px在 1000px布局上的结果。

那就下载下来。

小开

你正在背后绑一个有说，你不会使用较少的文件。我使用2.0构建了我的第一个 Bootstrap 主题，并且我用 CSS 做了所有的事情——创建了一个 override.CSS 文件。我花了好几天才把东西修好。

现在我们有3.0了。我向您保证，学习 CSS 比学习所有这些疯狂的 CSS 重写所花费的时间更少，如果您对 CSS 感到舒适的话，学习 CSS 会非常简单。做出你想要的改变是小菜一碟。

在 Bootstrap 3.0中，容器类控制宽度，所有包含的样式都进行调整以填充容器。容器宽度变量位于 variable.less 文件的底部。

// Container sizes
// --------------------------------------------------


// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));


// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));


// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

有些网站要么没有足够的内容来填充1020显示屏，要么出于审美原因你想要一个更窄的框架。因为 BS 使用一个12列的网格，所以我使用一个像960这样的倍数。

小开

解决办法如下:

@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}

这样做的好处是不会改变 Bootstrap 文件，而不是像 @ Bastardo’s答案中那样定制 Bootstrap。例如，如果使用 CDN，您仍然可以从 CDN 下载大部分 Bootstrap。

小开

使用1000px 宽度属性设置您自己的内容容器类，然后使用 容器-液体 boostrap 类代替容器。

有效，但可能不是最佳解决方案。

小开

@ mcbjam 已经给出了这个答案，但这里还有更多的解释。

您可以在 CSS 文件中使用媒体查询轻松地进行更改，而无需下载 BS。我刚刚做了这个，效果很好。

媒体查询的“ min-width”值将告诉 CSS 在大于1200px 的屏幕上将容器的宽度改为1000px 只有(或者选择包含在其中的任何宽度)。这样可以保持网站的响应能力，所以当屏幕大小低于这个值(更小的显示器、平板电脑、智能手机等)时，网站仍然会进行调整以适应更小的屏幕。

@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
小开

使用一个包装选择器并创建一个容器，其中包装器的宽度为100% ，以封装整个页面。

<style>#wrapper {width: 1000px;}
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
<div class="container">
<div class="row">....

现在，最大宽度设置为1000px，您不需要减少或粗鲁。

小开

将这些 CSS 片段添加到您的 CSS 样式中。最好在添加了 bootstrap css 文件之后再添加它，以便覆盖相同的内容。

html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`
小开

对于引导程序4，如果您正在使用 Sass，这里是要编辑的变量

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


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

为了覆盖这个变量，在导入 bootstrap 之前，我在我的. sass 文件中声明了 $Container-max-width，但没有使用! default。

注意: 我只需要更改 xl 值，因此不需要考虑断点。

小开

容器尺寸

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

在容器尺寸部分，将 1140改为 970

我希望它能帮到你。

谢谢你的纠正。 自定义引导链接: < a href = “ https://getbootstrap.com/docs/3.4/customize/”rel = “ nofollow norefrer”> https://getbootstrap.com/docs/3.4/customize/

小开

只需将容器添加到粘性导航栏;

小开

在引导程序中，只需将其添加到.CSS 文件中

.container {
max-width: 70% !important;/*Set your own width %; */
}
小开

如上所示，Bootstrap 生成一系列预定义的容器类，以帮助您构建所需的布局。您可以通过修改驱动这些预定义容器类的 Sass 映射(在 _ variable.scss 中找到)来定制它们:

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);

了解更多


提交答案