2015-12-13 2 views
0

Я пробуя программирования Bootstrap и когда я собирался изменить цвет моего body используя просто:Как изменить цвет моего тела при использовании Bootstrap?

body { 
    background-color: #eba; 
    width: 100%; 
    height: 100%; 
} 

Это не сработало, так что мой вопрос, как я могу что-нибудь стиль, используя Bootstrap? Я посмотрел в инструментах разработчика и обнаружил, что background-color: #eba; проигнорирован и заменен по умолчанию Bootstrap body color, почему? Не следует ли игнорировать значение Bootstrap body color вместо моего? (Я мог бы поставить два вопроса в один, так что простите меня).

Соответствующие HTML

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
       <h4>Column 1</h4> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat. 
       </p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
       <h4>Column 2</h4> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat. 
       </p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
       <h4>Column 3</h4> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat. 
       </p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
       <h4>Column 4</h4> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro exercitationem provident explicabo ipsa consequuntur, quidem dolorem perferendis veritatis facilis fugiat deleniti natus quod laboriosam eum incidunt consequatur cumque voluptates. Repellat. 
       </p> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

Соответствующий CSS

body { 
    background-color: #eba; 
} 
+3

вы включая ваш CSS после bootstrap.css? если да, то измените порядок и включите свой css после включения всех. – eramit2010

+0

@ Использование Арикой «! Важно» не является решением .. дайте CSS правильно. Пусть ваш CSS ниже загрузочного CSS –

+0

, вы можете включить файл bootstrap.min.css после упомянутого выше стиля, который приведет к переопределению вашего css by bootstrap css –

ответ

4

разместить заказ CSS после включения bootstrap.css или bootstrap.min.css

или добавить! Важные ключевые слова на ваш css

<style type="text/css"> 
body{background: #eba !important;} 
</style> 
+0

! Important используется, когда вы хотите выполнить этот стиль, существуют ли другие объявления. –

+0

Спасибо, я использовал 'CDN' раньше, теперь я использую файл min.css, он отлично работает сейчас, :) –

2

Вы должны включить ваш пользовательский .css файл после bootstrap.css/bootstrap.min.css Или же вы можете использовать '!important', чтобы сделать изменения.

Например:

body { 
    background-color: #eba !important; 
    width: 100%; 
    height: 100%; 
} 
Смежные вопросы