Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 3569 天前的主题，其中的信息可能已经有所发展或是发生改变。
有一个页面使用了 Bootstrap，父级用了container类，我想让里面的一个div宽度扩展到屏幕一样，肿莫破？
第 1 条附言 · 2015-01-30 14:18:20 +08:00
 |
1
iamcho 2015-01-30 12:11:28 +08:00
在div里给它加上一个类,给新加的类写样式
|
 |
2
Biwood 2015-01-30 12:12:41 +08:00  1
想办法使div脱离文档，然后宽度设为100%
|
 |
3
yushiro 2015-01-30 12:13:30 +08:00 via iPhone 1
用！important覆盖继承的样式
|
 |
4
kisshere 2015-01-30 12:15:45 +08:00 via Android
在HTML里面写style=""
|
 |
5
superbear 2015-01-30 12:19:18 +08:00
离他越近，越靠后的类优先级越高，可以覆盖
|
 |
6
jarlyyn 2015-01-30 12:22:52 +08:00
重写样式。放在更靠后的位置。加入更多的类限制。
不过觉得你的问题和是否继承无关的样子。 |
 |
9
iinterest 2015-01-30 12:40:21 +08:00
不能去掉，但可以写个新的覆盖，覆盖规则可以搜索『CSS 特殊性』
|
 |
11
learnshare 2015-01-30 12:40:45 +08:00
你这个问题不是改 CSS 来解决，是需要改 HTML 结构解决
|
 |
13
66beta 2015-01-30 12:57:57 +08:00
既然使用BS，就遵循它的设计理念，改HTML结构吧
懒就写CSS覆盖 |
 |
15
loading 2015-01-30 13:11:36 +08:00
加上 id ，在css 里写就行，id 看上去比写 style 那个些。。。
|
 |
16
momou 2015-01-30 13:18:03 +08:00
这样如何？
.container>row{ width: 166.67%; margin-left: -33.33%; } |
 |
17
juicy 2015-01-30 13:19:00 +08:00
css的强行继承真是广为诟病，难怪facebook那些人一直在抱怨css是个让人头疼的东西～
|
|
18
learnshare 2015-01-30 13:20:34 +08:00
用 CSS 解决这个问题，就是在挖更大的坑。不应该用 Bug 解决 Bug
|
 |
19
wincat OP @learnshare 你说的对，我也了解，但项目已经差不多了，想找个捷径处理。
|
 |
22
tension 2015-01-30 13:29:38 +08:00
给 <body class="action">
当前的action 加上class 然后自己单独写 比如 .home . container |
 |
25
muzuiget 2015-01-30 13:34:10 +08:00
|
 |
27
be1mont 2015-01-30 13:40:03 +08:00
style="padding:0;margin:0;"
|
|
29
learnshare 2015-01-30 13:44:48 +08:00
@wincat 为了以后挖坑...
|
|
31
loading 2015-01-30 13:54:43 +08:00
似乎你是因为它的父级元素宽度限制？
如果不改html，那么应该 position:absolute ，然后就更麻烦了。。。 建议你还是改html |
|
32
loading 2015-01-30 13:55:53 +08:00
建议上个demo，方便大家改
|
|
33
jarlyyn 2015-01-30 13:58:13 +08:00
前端页面无非3条路。
html,css,js。 你的需求理论上要改html最好。不然的话就用js直接操作dom呗…… |
|
36
tension 2015-01-30 14:25:51 +08:00
还是上演示吧。。。 不然看图说话太累了，不知道你想实现的是什么效果
|
|
37
jarlyyn 2015-01-30 14:39:13 +08:00
再看了下你的问题。你确定这个和父类或者继承有关吗？我怎么觉得你是父类有了padding,所以内部元素没法超框？这样的话用个负margin值就可以了。
|
|
38
wincat OP @jarlyyn 不只是父类padding的问题吧，bs的container类width在不同浏览器宽度范围下是一个相对固定的值。要让包含在container里的div宽度永远等于浏览器宽度，我认为使用固定的负值margin是无法保证刚好相等的。
|
|
39
jarlyyn 2015-01-30 14:50:42 +08:00
@wincat 你到底是要等于父类的宽，还是要等于屏幕的宽？这还是和继承没关系啊。是区域的结构或者划分的结构吧？
如果只是自适应的话，去做相应宽度下的样式就好了么。 |
 |
41
jankan 2015-01-30 15:10:57 +08:00
#page-content {position:static}
#headcontent {position:absolute;width:100%;height:xxxpx;} |
 |
43
lincanbin 2015-01-30 15:27:13 +08:00
用important覆盖样式，不要在html中插style属性，样式和HTML分离是良好习惯
|
 |
44
Aixtuz 2015-01-30 16:23:09 +08:00
“>”： 用他的爷爷级，把属性控制在父亲级，然后孙子级就不受影响了~
eg： #name1 > div 只有name1下的直属div 受该属性影像。 div里如果再有div是不继承的。 |
 |
45
shanelau 2015-01-30 17:20:38 +08:00
!important； 覆盖掉所有的样式
|
 |
46
dallaslu 2015-01-30 22:22:52 +08:00
/*
如果 #page-content 内部布局简单，可以试试。 */ #page-content { width: 100%; } #page-content > * { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } #head-content { width: 100%; } @media (min-width: 768px) { #page-content > * { width: 750px; } } @media (min-width: 992px) { #page-content > * { width: 970px; } } @media (min-width: 1200px) { #page-content > * { width: 1170px; } } |
|
47
dallaslu 2015-01-30 22:24:05 +08:00
不好意思，@media 同学，@ 了你这么多遍！
|
 |
49
strivek 2015-01-30 22:55:23 +08:00
这是我简单写的demo
http://codepen.io/nailu0/pen/gbxqoy/ 子元素想超过父元素宽度，最简单的方法是利用负margin值来实现 设定一个很大的margin:0 -100%;内部可以继续用container居中，col，row来布局，也可以自己灵活处理。 |
 |
50
Agromania 2015-01-30 23:04:33 +08:00
楼主你的问题并不是继承了样式的问题，而是100%的base的问题。这个要么去掉上层所有的position：relative（可能破坏bs的布局），要么更改你的html结构，要么用js处理
|
 |
52
baconrad 2015-01-30 23:20:55 +08:00
|
 |
54
MaqicXu 2015-01-31 10:44:25 +08:00
既然这样，你就不要用container装了嘛
|
|
56
Biwood 2015-01-31 11:00:55 +08:00
这个问题怎么还在讨论，晕，根据楼主描述，这根本不是CSS继承问题，也不是CSS优先级问题，很多人都搞错方向了，楼主说的明显是HTML结构问题。
目前我想到两个办法来解决： 第一个办法我在二楼已经说了，就是让这个div脱离文档流，就是用position:absolute或者position:fixed给div定位，这样div就可以相对于document来设置宽度了。 第二个办法就是改变页面的HTML结构，你的要求是.container里面的div大于.container 本身，明显你这个结构写的不好，一般都是面积大的元素包含面积小的元素，你可以考虑改一下结构，比如让div在.container外面。 |
Select Language