2013-09-10 2 views
1

Я хотел бы добавить единый фон для всех div-s с индексом span от 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, он установит его как bgcolor всех элементов span.

Вся помощь приветствуется.

+0

Какой браузер поддержка вам нужна – Itay

ответ

1

Вы должны изменить свой HTML, чтобы обернуть внутренние элементы пролетных в пределах ряда.

Попробуйте что-то вроде

<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/

+0

Большое спасибо, это именно то, что мне нужно. Я ценю! – fusi0n

0

Нанести унифицированные один за exluding плохих следующим образом:

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

Обратите внимание, что эти CSS3 селекторы не работают во всех браузерах, в частности, более старые версии Internet Explorer будут счастливо игнорировать их.

+0

я хочу единый фон, а не отдельно для каждого из них. – fusi0n

+0

вы можете проверить мой отредактированный ответ? – franchez

+0

Нет, не работает печально. – fusi0n

0

Не могли бы вы открыть файл .CSS и изменить диапазон 2-11 классов, чтобы иметь оранжевый фон?

Я считаю, что его примерно на полпути вниз в boostrap.css следующим образом:

.span12 { 
width: 940px; 
} 

просто добавить:

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

Выполнение чего-то подобного будет иметь большое значение. Не будет ли это относиться ко всем экземплярам классов «span»? – Kami

+0

Да, да. Если это не то, что вам нужно, тогда я бы не рекомендовал этот метод. –

Смежные вопросы