138

我已经使用 Twitter Bootstrap 开发了一个具有固定容器类的网站，但现在客户希望网站宽度为 1000 像素而不是 1170 像素。我不使用 .less 文件。

有没有一种快速的方法来解决这个问题？

4

11 回答 11

260

这是解决方案：

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

与@Bastardo 的答案中自定义 Bootstrap 相比，这样做的好处是它不会更改 Bootstrap 文件。例如，如果使用 CDN，您仍然可以从 CDN 下载大部分 Bootstrap。

于 2015-02-03T02:47:52.200 回答
78

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

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

然后下载它。

于 2013-06-14T11:07:38.980 回答
20

你在背后说你不会使用 LESS 文件。我使用 2.0 构建了我的第一个 Twitter Bootstrap 主题，并且我在 CSS 中完成了所有工作——创建了一个 override.css 文件。让事情正常工作需要几天的时间。

现在我们有了 3.0。让我向你保证，学习 LESS 所花费的时间比学习所有那些疯狂的 CSS 覆盖所花费的时间要少，如果你对 CSS 感到满意的话，这是非常简单的。做出你想要的改变是小菜一碟。

在 Bootstrap 3.0 中，容器类控制宽度，所有包含的样式都会调整以填充容器。容器宽度变量位于 variables.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 之类的倍数。

于 2013-10-25T17:26:23.690 回答
18

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

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

媒体查询的“最小宽度”值将告诉 CSS仅在大于 1200 像素（或您选择包含的任何宽度）的屏幕上将容器的宽度更改为 1000 像素。这保留了您网站的响应能力，因此当屏幕尺寸低于该值时（较小的显示器、平板电脑、智能手机等），您的网站仍将调整以适应较小的屏幕。

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}
于 2015-04-07T16:41:13.313 回答
18

对于 bootstrap 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;

为了覆盖这个变量，我在导入引导程序之前在我的 .sass 文件中声明了没有 !default 的 $container-max-widths。

注意：我只需要更改 xl 值，所以我不在乎考虑断点。

于 2019-06-19T09:39:25.457 回答
12

使用 1000px宽度属性设置您自己的内容容器类，然后使用container-fluid boostrap 类而不是容器。

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

于 2015-02-27T10:33:01.167 回答
9

使用包装器选择器并在该包装器内创建一个具有 100% 宽度的容器来封装整个页面。

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

现在最大宽度设置为 1000px，你不需要更少或 sass。

于 2015-11-15T06:37:23.970 回答
2

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

.container {
   max-width: 70% !important;/*Set your own width %; */
}
于 2021-11-10T16:02:44.410 回答
0

容器尺寸

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

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

我希望它对你有帮助。

谢谢你的正确。自定义引导链接：https ://getbootstrap.com/docs/3.4/customize/

于 2019-08-29T08:00:12.353 回答
0

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

于 2020-12-06T20:11:43.983 回答
-6

在您的 CSS 样式中添加这些 CSS。最好在添加引导 css 文件后添加它以覆盖相同的内容。 

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`
于 2016-04-23T12:43:20.360 回答