2016-06-04 2 views
1

В моем файле есть ссылки на стили бутстрапа.Почему классы бункеровки не разрешаются правильно?

Все ссылки на классы не соответствуют основному цвету. Проиллюстрировать. это test site, имеет button в левом верхнем углу с классом btn btn-success, который должен быть зеленым.

HTML

<!DOCTYPE html> 

<html lang="en" data-ng-app="wtApp"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Writer's Tryst, where authors and publishers, producers, agents meet.</title> 
     <meta name="description" content="A better way for writers to find publishers, producers and agents" /> 
     <link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'> 
     <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="frainversegment" content="!" /> 
     <meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
     <link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" /> 
     <link rel="stylesheet" href="css/main.css" /> 
     <link rel="stylesheet" href="css/shares.css" /> 
     <link rel="shortcut icon" href="img/icons/writers-tryst.png" /> 
<!-- 
     <script type="text/javascript"> 
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
       document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
     </script> 
     <script type="text/javascript"> 
      try { 
       var pageTracker = _gat._getTracker("UA-15499108-1"); 
        pageTracker._trackPageview(); 
       } catch (err) { } 
     </script> 

     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 

     <script> 
      (adsbygoogle = window.adsbygoogle || []).push({ 
       google_ad_client: "ca-pub-3982825388677642", 
       enable_page_level_ads: true 
      }); 
     </script> 
--> 
    </head> 
    <body data-ng-controller="mainController"> 
     <header> 
      <nav class="navbar navbar-light"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a> 
        </div> 
        <div class="collapse navbar-collapse" id="Writers-Tryst"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a id="homepage" href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li> 
          <li><a href="#writers" class="glyphicon glyphicon-book"> Writers</a></li> 
          <li><a href="#enablers" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li> 
          <li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li> 
          <li><a href="#privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li> 
          <li><a href="#contact" class="glyphicon glyphicon-envelope"> Contact</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li> 
          <li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li> 
          <li class="dropdown"> 
           <a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a id="update-profile" href="#update-profile">Update profile</a></li> 
            <li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li> 
           </ul> 
          </li> 
          <li ><a id="reset-pwd-link" href="#reset-pwd"></a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
<!-- 
      <div class="google-ad-top"> 
       <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
       <ins class="adsbygoogle" 
         style="display:inline-block;width:728px;height:90px" 
         data-ad-client="ca-pub-3982825388677642" 
         data-ad-slot="1133448516"></ins> 
       <script> 
        (adsbygoogle = window.adsbygoogle || []).push({}); 
       </script> 
      </div> 
--> 
     </header> 
     <div id="shares"> 
      <!-- Twitter --> 
      <a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter"> 
       <i class="fa fa-twitter"></i> 
      </a> 

      <!-- Google Plus --> 
      <a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus"> 
       <i class="fa fa-google-plus"></i> 
      </a> 

      <!-- Facebook --> 
      <a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook"> 
       <i class="fa fa-facebook"></i> 
      </a> 

      <!-- StumbleUpon (url, title) --> 
      <a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon"> 
       <i class="fa fa-stumbleupon"></i> 
      </a> 

      <!-- Reddit (url, title) --> 
      <a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit"> 
       <i class="fa fa-reddit"></i> 
      </a> 

      <!-- LinkedIn --> 
      <a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin"> 
       <i class="fa fa-linkedin"></i> 
      </a> 

     </div> 
     <button class="btn btn-success">Hello World</button> 
     <div> 
      <div id="message" class="alert m-t-10"></div> 
      <div id="main" class="content"> 
       <!-- angular templating --> 
       <!-- this is where content will be injected --> 
       <div data-ng-view></div> 
      </div> 
     </div> 
     <footer class="panel panel-default"> 
      <div>&#169; 2016 Ronald Tornambe, Inc.</div> 
     </footer> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="js/common.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
     <script src="js/pages.js"></script> 
     <script> 
      $("#drop-toggle-1").on("click", function (e) { 
       e.preventDefault(); 
      }); 
      $("#update-profile").on("click", function() { 
       sessionStorage.setItem("create-or-update", "update"); 
       console.log("session-storage=" + sessionStorage.getItem("create-or-update")) 
       $("#create-account-link").trigger("click"); 
      }); 
     </script> 
    </body> 
</html> 
+0

переопределения его в main.css. – Lex

ответ

1

Пуговицы из имеют класс .btn плюс второй класс, в этом случае .btn-success и вы находитесь в main.css (строка 123) Переопределение класса .btn с background-color: blue;

.btn { 
    background-color: blue; 
    border-radius: 4px; 
    font-size: smaller; 
} 

Мой совет является изменить только второй класс, который привязан к какому-либо событию/действию кнопки. вместо общего .btn (кнопка)

+0

Я забыл, что сделал это. Благодарю. Я буду отмечать ваш ответ как принятый, так как вы находитесь в верхней части списка. –

+0

приветствуется ':)' – dippas

+0

downvote why ??? – dippas

1

Кнопки с .btn зеленого цвета по умолчанию в загрузчике, но вы переопределены, что в main.css по линии 123.

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

1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous"> 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" /> 
<link rel="stylesheet" href="css/main.css" /> 
<link rel="stylesheet" href="css/shares.css" /> 

Вы создали .btn класс в CSS/main.css и этот класс наиважнейшая класс в файле bootstrap.css

1

Примечание: Если вы используете Bootstrap в качестве базовой таблицы стилей, это не намеренное решение вопроса! Однако это может указывать на потенциальные проблемные области с переопределяющими стилями в пользовательских таблицах стилей.


Стили для .btn переопределены в main.css. Это вызвано загрузкой main.css после bootstrap.css.

С Chrome DevTools:

View of CSS from page

С этого изображения, вы можете увидеть, что стили для .btn в main.css имеют более высокий приоритет, чем те, для .btn-success из buttons.less (часть стилей Bootstrap в).

Вы можете легко изменить приоритет, перемещая таблицу стилей для main.css над номером bootstrap.css, что сделает стили Bootstrap более приоритетными, чем настроенные.

Вот что ваш сайт выглядит как: Main overriding Bootstrap

И после переезда main.css: Bootstrap overriding main

+0

Мы не должны перемещать bootstrap.css после пользовательского, css. Потому что bootstrap.css работает как base.css :) – dippas

+0

True! Я не хотел, чтобы это было полным решением, а скорее средством отладки, чтобы увидеть, где стили могут быть переопределены и что должно быть исправлено. Добавлено разъяснение, чтобы ответить. – cyberbit

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