rails - css随意破坏导航栏

时间：2016-01-13 06:12:30

标签： css ruby-on-rails twitter-bootstrap heroku assets

网站启动并运行：

www.glimp.co.nz

随机地css停止工作（不确定触发器）并且导航栏上的元素（参见图片）恢复为默认的bootstrap css。

在Nav上打破CSS： enter image description here

页脚不粘在底部： enter image description here

-nav.html.erb 

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <img alt="Brand" src="/assets/compareswitchsave.png" height="70" width="150" >
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li id="nav-broadband-link"><a id="nav-broadband-link-GA" href="/broadband/search">BROADBAND</a></li>
        <li><a href="/#aboutus">ABOUT US</a></li>
        <li><a href="#new-index-footer" id="contact-us-nav-link" onclick="footerContactUsJiggle()">CONTACT US</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

nav.scss 

.navigation>img {
  width: 170px;
  height: 70px;
  margin-left: 35px;
}

.navigation>a {
  float: right;
  font-family: 'Oswald', sans-serif;
  display: inline;
  text-decoration: none;
  margin: 30px 40px 0px 0px;
  color: #AB47BC;
  font-weight: bold;
  font-size: 15px;
}

.navigation>a:hover {
  color: #ccc;
  text-decoration: none;
}

.navbar-brand {
  margin-left: 5% !important;
}


.navbar-brand>img {
  margin-left: 5% !important;
}

这种情况间歇性地发生，但主要是在移动设备上，桌面工作正常，而移动css干扰电线。然而，有时桌面css会中断，而移动设备则很好。

有时当css中断时它也会阻止任何javascript工作，但情况并非总是如此。

为了纠正这个enter code here，我必须删除sprockets文件并重新编译资产，然后再回到heroku来解决问题。每次css中断时我都要重复这个过程。

我不确定这是一个引导问题，还是rails编译css或者我们正在使用的部分内容的方式，但任何帮助都会很棒！

application.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <title>glimp - Compare Broadband Spark Vodafone Slingshot Orcon Flip Bigpipe Compass Unlimited</title>

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <%= javascript_include_tag 'application' %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-70480672-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- Facebook Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    document,'script','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', '1660762074163778');
    fbq('track', "PageView");</script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1660762074163778&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '995092153863062',
          xfbml      : true,
          version    : 'v2.5'
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

    <!-- Google Tag Manager -->



      <noscript>
        <iframe src="//www.googletagmanager.com/ns.html?id=GTM-TS7QXF" height="0" width="0" style="display:none;visibility:hidden"></iframe>
      </noscript>
      <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-TS7QXF');
      </script>
    <!-- End Google Tag Manager -->
    <%= render 'navigation/nav'%>
    <div class="wrapper">
      <%= yield %>
    </div>
    <%= render 'social_icons/social_icons'%>
    <div class="push"></div>
    <%= render 'footer/foot'%>
  </body>

</html>

footer.scss 

/*********************
  MAIN FOOTER STYLING
*********************/

  .new-index-footer {
    background-color: #f5f5f5;
    bottom: 0;
    width: 100%;
    height: 80px;
  }

  .footer-links>a {
    font-family: 'Oswald', sans-serif;
    color: grey;
    text-decoration: none;
    font-weight: bold;
  }

  .footer-links>a:visited {
    color: lightgrey;
    text-decoration: none;
    font-weight: bold;
  }

  a:hover {
    color: black;
    text-decoration: none;
    font-weight: bold;
  }

  .footer-links {
    display: inline-block;
    text-align: center;
    padding-top: 30px;
    margin-left: 10px;
    margin-right: 30px;
  }



  #new-index-footer>img{
    float: left;
    margin-top: 5px;
    margin-left: 5px;
  }

  .a-tag-container {
    text-align: right;
    height: 100%;
  }


@media only screen and (min-width: 320px) and (max-width: 768px){


  .footer-links {
    display: inline-block;
    text-align: center;
    padding-top: 30px;
    margin-left: 5px;
    margin-right: 5px;
  }

  #new-index-footer>img{
      display: none;
  }

   #contact-us-footer-link {
    margin-right: 0;
  }

  .a-tag-container {
    text-align: center;
    height: 100%;
  }

  .other-info-footer-links{
    margin-right: 10px;
  }

}


/**************************
   OTHER FOOTER STYLING
**************************/



  .other-info-footer{
    background-color: #f5f5f5;
    bottom: 0;
    width: 100%;
    height: 30px;
  }

  .other-info-footer-links {
    display: inline-block;
    text-align: center;
    margin-right: 30px;
    margin-left: 30px;
  }

  .other-info-footer-links>a {
    font-family: 'Oswald', sans-serif;
    color: grey;
    text-decoration: none;
    font-weight: bold;
  }

  .other-info-footer-links>a:visited {
    color: lightgrey;
    text-decoration: none;
    font-weight: bold;
  }

0 个答案:

没有答案
相关问题
最新问题