ale*_*lex 110 twitter-bootstrap
我使用Twitter Bootstrap开发了一个固定容器类的网站,但现在客户希望网站宽度为1000px而不是1170px.我不使用.less文件.
有没有快速解决方法？
mcb*_*jam 193
这是解决方案:
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
与在@Bastardo的答案中定制Bootstrap相比,这样做的好处是它不会更改Bootstrap文件.例如,如果使用CDN,您仍然可以从CDN下载大部分Bootstrap.
小智 20
你绑在背后说你不会使用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这样的倍数.
小智 17
@mcbjam已经给出了这个答案,但这里有更多的解释.
您可以使用CSS文件中的媒体查询轻松进行更改,而无需下载BS.我刚刚做了这件事而且效果很好.
媒体查询的"最小宽度"值将告诉CSS 仅在大于1200px的屏幕上(或您选择包含在那里的任何宽度)将容器的宽度更改为1000px.这样可以保持您网站的响应能力,因此当屏幕尺寸低于该值(较小的显示器,平板电脑,智能手机等)时,您的网站仍会进行调整以适应较小的屏幕.
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
Kai*_*are 17
对于 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;
为了覆盖这个变量，我在导入引导程序之前在我的 .sass 文件中声明了 $container-max-widths 而没有 !default。
注意：我只需要更改 xl 值，所以我不在乎考虑断点。
在引导程序中，只需将其添加到您的 .CSS 文件中
.container {
max-width: 70% !important;/*Set your own width %; */
}
小智 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,您不需要更少或更少.
| 归档时间： |
|
| 查看次数： |
334420 次 |
| 最近记录： |