Question

我想为所有div-s添加一个统一的背景，其跨度索引为2-11。 HTML如下：

<html>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1"></div>
        <div id="main_div">    <!--Background starts here !!! -->
    <div class="span2" id="timetable">Timetable</div>
    <div class="span6" id="game_window">Game window</div>
            <div class="span2" id="stuff">Stuff</div>
        </div>                <!--Background ends here !!! -->
        <div class="span1"></div>
    </div><!--row-fluid-->
</div><!--container-fluid-->

假设的背景也标有评论。背景应该是div＃main_div。目前，如果我向#main_div添加背景颜色，它会将其设置为所有span元素的bgcolor。

感谢所有帮助。

Answer 1

您需要修改html以将内部span元素包装在一行中。

尝试类似

的内容

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1"></div>
        <div class="span10">
           <div class="row-fluid" id="main_div">    <!--Background start!!! -->
              <div class="span2" id="timetable">Timetable</div>
              <div class="span6" id="game_window">Game window</div>
              <div class="span2" id="stuff">Stuff</div>
           </div>                <!--Background end!!! -->
        </div>
        <div class="span1"></div>
    </div><!--row-fluid-->
</div><!--container-fluid-->

现在，如果添加背景，它将仅应用于所需元素。

例如

#main_div {
   background:orange;
}

在http://jsfiddle.net/YTJub/

看到一个完整的小提琴

Answer 2

通过排除坏的方法来应用统一的方法如下：

#main_div :not(.span1, .span12) {background-color:#f00 }

请注意，这些CSS3选择器不适用于所有浏览器，特别是旧版本的Internet Explorer会很乐意忽略它们。

Answer 3

您是否可以打开.CSS文件并更改范围2 - 11类以使背景为橙色？

我相信它在boostrap.css中大约一半如下：

.span12 {
width: 940px;
}

只需添加：

 .span12 {
width: 940px;
background-color:orange;
}

Twitter引导液体行背景

3 个答案: