我正在用Twitter Bootstrap构建我的第一个站点,并try 流畅的布局.我已经将我的容器设置为流动的,现在里面的内容占据了整个页面宽度,并且随着我调整浏览器的大小而调整.

我正在进行的设计是为最大宽度~950px创建的.

我已经判断了variables.lessresponsive.less,以及Bootstrap文档;我不太清楚如何实现这一点.

我还try 将以下内容添加到我的style.css:

body {
    max-width: 950px;
}

推荐答案

Edit

要做到这一点,更好的方法是:

  1. 创建自己的less文件作为主less文件(如bootstrap.less).

  2. 导入您需要的所有无 bootstrap 文件.(在这种情况下,您只需要导入responsive-1200px-min.less个响应较少的所有文件)

  3. 如果您需要修改原始的无 bootstrap 文件中的任何内容,您只需编写您自己的LESS来覆盖BOOTSTRAP的LESS代码.(只需记住将较少的代码/文件放在@import { /* bootstrap's less file */ };之后).

Original

我也有同样的问题.我就是这么修好的.

查找媒体查询:

@media (max-width:1200px) ...

把它拿走.(我指的是整件事,而不仅仅是@media (max-width:1200px)件)

因为 bootstrap 的默认宽度是940px,所以您不需要做任何事情.

如果您想拥有自己的max-width,只需修改媒体查询中与所需宽度匹配的CSS规则即可.

Css相关问答推荐

在react native中应用阴影

如何在移动屏幕尺寸上包装元素?

视频覆盖不适用于reactjs样式的组件

日期面板未与Angular中的日期控件对齐

如何在Angular material 选项卡中设置自定义圆角下划线的样式

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

Astro网站在使用Astro Build构建后无法正常工作

我可以拆分我的 CSS / SASS webpack 加载器规则,还是它们需要成为一个大规则?

nth-child 在一个页面上工作,但不在另一个页面上

如何使单选按钮看起来像切换按钮

flex-start 和基线有什么区别?

如何使表格中一行的最后一个单元格占据所有剩余宽度

Angular Material 中的样式垫 Select

固定元素在 Chrome 中消失

如何在 CSS 中覆盖图像?

水平列表项

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素?

为什么是垂直对齐:文本顶部;不能在 CSS 中工作

React - 防止父子事件触发

仅使用 CSS 交换 DIV 位置