我使用Twitter Bootstrap开发了一个固定容器类的网站,但现在客户希望网站宽度为1000px而不是1170px.我不使用.less文件.
有没有快速解决方法？
我在Twitter Bootstrap中使用了2列流体布局.左列是主要内容(span10),右列是小部件的侧边栏(span2).目前,在调整浏览器窗口大小时,Bootstrap会通过创建一个列来响应,最左边的部分位于顶部,最右边的部分位于底部.我反过来喜欢它.
这是我的html的要点:
<body>
<div id="content" class="container-fluid">
<div id="content-row-1" class="row-fluid">
<div id="mainContainer" class="span10"> Lots of content goes here </div>
<div id="sidebar" class="span2"> Widgets </div>
</div> <!-- content-row-1 -->
</div> <!-- content -->
</body>
mainContainer左侧是否有任何方法可以在宽窗口中显示右侧的小部件,但是sidebar当窗口缩小时会对齐顶部？
如何使用Twitter Bootstrap创建类似于表的列表结构,其中一些列占用尽可能多的空间,以容纳该列的最宽元素,并且单个列占用剩余空间？
例如:
Id |Name |Email address
100001|Joe |MamiePVillalobos@teleworm.us
100 |Christine|ChristineJWilliams@dayrep.com
1001 |John |JohnLMiley@dayrep.com
该ID列只需要足够的空间来容纳100001号,这是最长的ID.
" 名称"列占用的空间足以容纳名称Christine.
" 电子邮件"列占用剩余空间.
如果我的浏览器大小为992px宽,那么.container的最大宽度为970px.如果我的浏览器大小为991px宽,那么.container的最大宽度为750px.为什么最大宽度有这么大的跳跃？为什么不是最大宽度为1170px左右,每边有20px的边距或某些东西,这样当您调整浏览器窗口大小时,容器宽度可以平滑地缩放而不是大跳？
例如,在992px的屏幕宽度下,每侧只有很小的余量(11px).然而,在991px宽度的情况下,我每边都有120px的边距,这意味着近25%的屏幕空间都是空边.这对我来说没有多大意义.有没有理由这样做？我可以删除这种更喜欢某些容器宽度而不破坏东西的行为吗？
任何人都可以告诉我在twitter bootstrap中固定和流体行之间的区别是什么.我是初学者.
谢谢,阿比
我只想清除一件事.如果我正在使用"container-fluid"类,这意味着我在bootstrap.css中不能有这样的东西:
.container-fluid{
width: 1170px;
}
我尝试设置像素,响应性自然只是关闭.设置为%时有效.换句话说,我的问题是这样的:我如何设置容器流体的固定宽度？或者它只是默认不是由bootstrap开发人员？
我已经阅读了这个链接: 流体或固定网格系统,基于Twitter Bootstrap的响应式设计
但根本找不到任何关于响应性和固定宽度的东西 container-fluid.
我目前正在调查使用Twitter引导程序作为我未来为客户开发Web开发项目的基础.我已经浏览了他们的Github页面上的所有标准文档,并且根据我的理解,为了有效地使用网格布局,您的行必须只包含总共十二列(由不同的元素或单个元素组成).
考虑到这一点,我进行了一项小测试,其中一些文本连续4列,并且偏移的div跨越6列.这似乎工作正常但是,我已经尝试包含一个包含div的3行,这些列被9列(总共12列)偏移,给人的印象是div中的内容在页面上浮动.问题是当窗口模式适合桌面时这看起来很好但是当我开始缩放窗口时,div的内容被推出整个容器.如果我继续按比例缩小窗口,则元素将按照我对移动视图的预期进行堆叠.
我的问题是,为什么这样做？我的理解是,只要有12列,内容就会被保留在外部容器中.
我的代码可以在下面找到.有很多内联css,但这仅用于测试目的.这是库存引导程序,在自定义阶段检查所有选项,这意味着包含所有响应选项.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<!--BOOTSTRAP-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid" style="border: 1px solid #cccccc">
<div class="row-fluid">
<div class="span4">This is a div spanning 4 columns</div>
<div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div>
</div>
<div class="row-fluid">
<div class="span3 offset9">
<form class="form-search">
<div class="row-fluid">
<div class="input-append span2">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button> …