Fatal编程技术网

Twitter bootstrap 引导：如何更改容器的宽度？

twitter-bootstrap

Twitter bootstrap 引导：如何更改容器的宽度？,twitter-bootstrap,Twitter Bootstrap,我使用Twitter引导开发了一个带有固定容器类的网站，但现在客户希望网站的宽度为1000px，而不是1170px。我不使用.less文件 有没有快速的方法来解决这个问题？转到引导站点的部分，选择您喜欢的大小。您必须设置@gridColumnWidth和@gridGutterWidth变量 例如：@gridColumnWidth=65px和@gridGutterWidth=20px在1000px布局上产生结果 然后下载它。你在背后绑着一个，说你不会使用更少的文件。我用2.0构建了我的第一个Twi

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

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

转到引导站点的部分，选择您喜欢的大小。您必须设置
@gridColumnWidth
和
@gridGutterWidth
变量

例如：
@gridColumnWidth=65px
和
@gridGutterWidth=20px
在
1000px
布局上产生结果

然后下载它。

你在背后绑着一个，说你不会使用更少的文件。我用2.0构建了我的第一个Twitter引导主题，我用CSS做了所有的事情——创建一个override.CSS文件。要使事情正常运转需要几天的时间

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

在Bootstrap3.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的倍数

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}
这样做的好处是，它不会改变引导文件，而不是像答案中那样定制引导。例如，如果使用CDN，您仍然可以从CDN下载大部分引导程序。

将您自己的内容容器类设置为1000px宽度属性，然后使用引导程序类而不是容器

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

@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；}
#容器{最大宽度：100%；显示：块；}
....
现在，最大宽度设置为1000px，您不需要更少的或sass。

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

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`
对于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;
为了覆盖这个变量，我声明了$container max widths，但没有！导入引导之前，在my.sass文件中使用默认值

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

容器大小

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)
在节容器大小中，将
1140
更改为
970

我希望它能帮助你

谢谢你的正确回答。
自定义引导链接：

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

参考答案，我认为您的问题将在该答案中得到解决。@prem，tx但我没有得到示例，因为它没有使用任何引导类，如span或container。我认为这个项目所需要的就是使用响应引导将容器的最大值设置为940px。@alex我只是尝试了
，这拓宽了容器。这是解决问题的快捷方法。通过更改gridColumnWidth和gridGutterWidth变量，无法达到精确的1000px容器。。。因为（12*（gridColumnWidth）+12（gridGutterWidth））不等于1000。所以只有我给出了解决方案。这是正确的吗？理论上，有无限个组合匹配1000px。举个例子：12*65+11*20=1000（柱子之间只有11个排水沟）。哈！我真的不认识这件简单的事。。。不管怎么说，你的是最合适的解决方案。谢谢你的帖子，它很有帮助；）请注意：实际上，对于1000px的宽度，将有7种解决方案使用全像素。（列宽10、21、32、43、54、65和76）@dfherr我不知道你说“实际上”是什么意思，但请记住CSS支持像素的十进制值。因此，有无限的解决方案。有效，但是：变量名是
@container sm
，
@container md
和
@container lg
（现在）@Bastardo nice name+1大多数CDN。您的答案是一个完美的解决方案。它非常适合使用CDN的人。在构建时修改LESS（当4到达时，SASS）非常适合托管自己的引导CSS的人。但是，修改在提供的代码之后导入的自定义LESS（或SASS）意味着可以升级底层LESS，而无需（通常）进行差异。我知道这已经很晚了，但是如果您在上面的代码中添加width:auto，容器现在会更大。您可以使容器比其1170 max更大。这正是我想要的。谢谢。这是工作，只需将代码放在容器类div中。