使用Bootstrap设置几何体的最大宽度

sc4hvdpw  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(5)|浏览(204)

我正在用Twitter Bootstrap构建我的第一个网站,并尝试使用流畅的布局。我已经将容器设置为流畅的,现在里面的内容占据了整个页面的宽度,并随着我调整浏览器的大小而调整。
我的设计工作是为最大宽度~ 950 px。
我已经检查了variables.lessresponsive.less以及Bootstrap文档;我不知道该怎么做。
我还尝试将以下内容添加到我的style.css中:

body {
    max-width: 950px;
}
tcomlyy6

tcomlyy61#

您不必通过删除@media (max-width:1200px)来修改引导响应...
我的应用程序有一个1600 px的max-width。下面是我的工作原理:
1.创建bootstrap-custom.css -尽可能多地,我不想覆盖我原来的 Bootstrap css。
1.在bootstrap-custom.css中,通过包含以下代码来覆盖container-fluid:
就像这样:

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}
cu6pst1q

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) ...

删除它。(我指的是整个内容,而不仅仅是@media (max-width:1200px)
由于Bootstrap的默认宽度为940 px,因此您无需执行任何操作。
如果你想拥有自己的max-width,只需修改媒体查询中的css规则,使其与你想要的宽度相匹配。

fafcakar

fafcakar3#

在responsive.less中,您可以注解掉导入responsive-1200 px-min. less的行。

// Large desktops

@import "responsive-1200px-min.less";

就像这样:

// Large desktops

// @import "responsive-1200px-min.less";
b4wnujal

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%完美!

uyhoqukh

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会更改其宽度。希望它能有所帮助。

相关问题