我正在用Twitter Bootstrap构建我的第一个网站,并尝试使用流畅的布局。我已经将容器设置为流畅的,现在里面的内容占据了整个页面的宽度,并随着我调整浏览器的大小而调整。
我的设计工作是为最大宽度~ 950 px。
我已经检查了variables.less
和responsive.less
以及Bootstrap文档;我不知道该怎么做。
我还尝试将以下内容添加到我的style.css
中:
body {
max-width: 950px;
}
我正在用Twitter Bootstrap构建我的第一个网站,并尝试使用流畅的布局。我已经将容器设置为流畅的,现在里面的内容占据了整个页面的宽度,并随着我调整浏览器的大小而调整。
我的设计工作是为最大宽度~ 950 px。
我已经检查了variables.less
和responsive.less
以及Bootstrap文档;我不知道该怎么做。
我还尝试将以下内容添加到我的style.css
中:
body {
max-width: 950px;
}
5条答案
按热度按时间tcomlyy61#
您不必通过删除
@media (max-width:1200px)
来修改引导响应...我的应用程序有一个1600 px的
max-width
。下面是我的工作原理:1.创建bootstrap-custom.css -尽可能多地,我不想覆盖我原来的 Bootstrap css。
1.在bootstrap-custom.css中,通过包含以下代码来覆盖container-fluid:
就像这样:
cu6pst1q2#
编辑
更好的方法是:
1.创建您自己的.less文件作为主.less文件(如bootstrap.less)。
1.导入所需的所有bootstrap .less文件。(在本例中,您只需导入除
responsive-1200px-min.less
之外的所有响应.less文件)1.如果你需要修改原始bootstrap .less文件中的任何内容,你只需要编写你自己的.less来覆盖bootstrap的.less代码。(记住把你的.less代码/文件放在
@import { /* bootstrap's .less file */ };
之后)。原件
我也有同样的问题。我就是这么解决的。
查找媒体查询:
删除它。(我指的是整个内容,而不仅仅是
@media (max-width:1200px)
)由于Bootstrap的默认宽度为940 px,因此您无需执行任何操作。
如果你想拥有自己的
max-width
,只需修改媒体查询中的css规则,使其与你想要的宽度相匹配。fafcakar3#
在responsive.less中,您可以注解掉导入responsive-1200 px-min. less的行。
就像这样:
b4wnujal4#
不幸的是,以上都没有为我解决这个问题。
我不想编辑bootstrap-responsive.css,所以我选择了简单的方法:
1.创建优先级高于bootstrap-responsive.css的css
1.复制
@media (min-width: 768px) and (max-width: 979px)
的所有内容(第461行,包含截至目前的最新 Bootstrap 版本2.3.1)1.将其粘贴到您的高优先级css中
1.在你的css中,把
@media (min-width: 979px)
放在之前写@media (min-width: 768px) and (max-width: 979px)
的地方,这样就把从768到979的样式设置为768以上的所有样式。就是这样。它不是最佳的,你会有重复的css,但它的工作100%完美!
uyhoqukh5#
我不知道这里是否指出了这一点。
.container
宽度的设置必须在Bootstrap网站上设置。我个人不需要编辑或修改CSS文件中的任何内容来调整我的.container
大小(1600 px)。在“自定义”选项卡下,有三个部分负责媒体和网络的响应:除了 Media queries breakpoints(我相信大多数人都会提到),我还将
@container-desktop
更改为(1130px + @grid-gutter-width)
,将@container-large-desktop
更改为(1530px + @grid-gutter-width)
。现在,如果我的浏览器放大到~ 1600 px和~ 1200 px,.container
会更改其宽度。希望它能有所帮助。