Bootstrap:如何更改容器的宽度?

时间:2013-04-08 16:16:15

标签: twitter-bootstrap

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

有没有快速解决方法?

10 个答案:

答案 0 :(得分:172)

以下是解决方案:

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

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

答案 1 :(得分:70)

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

例如:@gridColumnWidth = 65px@gridGutterWidth = 20px会产生1000px布局。

然后下载它。

答案 2 :(得分:21)

你背后有人说你不会使用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这样的倍数。

答案 3 :(得分:16)

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

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

媒体查询" min-width"值将告诉CSS将容器的宽度更改为大于1200px的屏幕上的1000px (或者您选择包含在那里的任何宽度)。这会保留您网站的响应能力,因此当屏幕尺寸低于该值(较小的显示器,平板电脑,智能手机等)时,您的网站仍会进行调整以适应较小的屏幕。

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

答案 4 :(得分:10)

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

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

答案 5 :(得分:6)

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

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

现在最大宽度设置为1000px,您不需要更少或更少。

答案 6 :(得分:0)

对于引导程序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文件中声明了$ container-max-widths,而没有!default。

注意:我只需要更改xl值,这样我就不必考虑断点了。

答案 7 :(得分:0)

容器尺寸

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

在“容器大小”部分,将 1140 更改为 970

希望它能对您有所帮助。


感谢您的正确回答。 自定义引导程序的链接:https://getbootstrap.com/docs/3.4/customize/

答案 8 :(得分:0)

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

答案 9 :(得分:-1)

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

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