html - 如何阻止某些引导类全局激活？

Question

以下 HTML 和 CSS 代码在我的本地计算机上运行良好，但是当我在服务器上运行它时，外观会发生变化。

你可以在那里查看：http ://examhotwire.com/ 。

一些引导类已被激活。如何从本地和服务器获得相同的结果？

body {
  padding-top: 50px;
}

.container {
  width: 100%;
}

.col-md-3 {
  width: 20%;
  margin-left: 0;
}

.col-md-9 {
  width: 58%;
}

#masthead {
  min-height: 250px;
}

#masthead h1 {
  font-size: 30px;
  line-height: 1;
  padding-top: 20px;
}

#masthead .well {
  margin-top: 8%;
}

.breadcrumb>li+li::before {
  content: ">\00a0";
}

.back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.mytable {
  display: inline-block;
  width: 100%;
  overflow: auto;
  height: auto;
  overflow: scroll;
  border: 0px solid;
}

table tr {
  /*display: block;*/
  border-top: 1px solid #777;
}

th td {
  width: auto;
}

#collapse_menu {
  visibility: hidden;
  height: 2%;
  display: none;
}

.back-to-top:hover {
  background-color: #ca8df6;
}

.back-to-top:hover::before {
  background-color: #ca8df6;
}

.back-to-top:hover::after {
  background-color: #ca8df6;
}

@media screen and (max-width: 600px) {
  #leftCol {
    visibility: hidden;
    height: 2%;
    display: none;
  }
  #sec0 {
    font-size: 25px;
  }
  #collapse_menu {
    visibility: visible;
    display: table-caption;
    margin-top: 25%;
    position: sticky;
  }
  .navbar {
    padding: 0px !important;
  }
  .col-md-9 {
    width: 100%;
  }
  #leftCol1 {
    width: 100%;
  }
}

#sidebar1 {
  text-align: left;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 50px;
  }
}

.navbar-bright {
  background-color: #111155;
  color: #fff;
}

.affix-top,
.affix {
  position: static;
}

@media (min-width: 979px) {
  #sidebar.affix-top {
    position: static;
    margin-top: 30px;
    width: 228px;
  }
  #sidebar.affix {
    position: fixed;
    top: 70px;
    width: 228px;
  }
}

#sidebar li.active {
  border: 0 #eee solid;
  border-right-width: 5px;
}

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  position: static;
  padding: 15px;
  background-color: #ffffff;
  min-height: 60px;
  text-decoration: none;
}

.navbar-fixed-top {
  position: fixed !important;
}

body {
  margin-top: 20px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109357260-3"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-109357260-3');
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <meta name="description" content="Average height of a rose plant varies from 8 inches to as tall as 50 feet depending on the variety.">
  <link rel="icon" sizes="92*200" href="brand.jpg">

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <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 href="index.html"> <img src="logo.jpg" class="navbar-brand" id="brand-image" style="height: 50px; width: 130px; padding: 0px;"></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">
          <li><a href="home.html">Home</a></li>

          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Exams<b class="caret"></b></a>
            <ul class="dropdown-menu multi-level">
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">SSC</a>
                <ul class="dropdown-menu">
                  <li><a href="#">SSC CGL</a></li>
                  <li><a href="#">SSC CHSL</a></li>
                  <li><a href="#">SSC MTS</a></li>
                  <li><a href="#">SSC JE</a></li>
                  <li><a href="#">SSC Sub Inspecto</a></li>
                  <li><a href="#">SSC Stenographer</a></li>
                  <li><a href="#">SSC GD Constable</a></li>
                  <li><a href="#">SSC JHT</a></li>
                  <li><a href="#">SSC Selection Post</a></li>


              </li>
              </ul>
          </li>
          <li><a href="#">Railway</a></li>
          <li><a href="#">UPSC</a></li>
          <li><a href="#">DRDO</a></li>
          <li><a href="#">LIC</a></li>
          <li><a href="#">RBI</a></li>
          <li><a href="#">IBPS</a></li>
          <li><a href="#">SBI</a></li>

          </ul>
          </li>
          <li><a href="privacy.html">Academic</a></li>
          <li><a href="privacy.html">Privacy</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
            <li><a href="https://www.facebook.com/Titlys-Collection-115875246882822/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://twitter.com/TitlyCollection" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.instagram.com/titlyscollection/" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>

          </ul>

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


  <script type="text/javascript">
    $(function() {
      $('.dropdown').hover(function() {
          $(this).addClass('open');
        },
        function() {
          $(this).removeClass('open');
        });
    });
  </script>

  <div class="container" style="margin-top: 3%;">
    <div class="row">
      <!--left-->
      <div class="col-md-3" id="leftCol">

        <ul class="nav nav-stacked" id="sidebar">
          <li style="margin-top: 2%; text-align: center;"><b> Table of Content</b></li>
          <li><a href="#sec0" class="list-group-item">SSC CGL 2020 Exam Date</a></li>
          <li><a href="#sec1" class="list-group-item">SSC CGL Eligibility Criteria</a></li>
          <li><a href="#sec2" class="list-group-item">Online Application</a></li>
          <li><a href="#sec3" class="list-group-item">SSC CGL Exam Pattern</a></li>
          <li><a href="#sec4" class="list-group-item">SSC CGL Syllabus</a></li>
          <li><a href="#sec5" class="list-group-item">SSC CGL Exam Centre </a></li>
          <li><a href="#sec6" class="list-group-item">SSC CGL Vacancy</a></li>
          <li><a href="#sec7" class="list-group-item">SSC CGL Result and Cut Off</a></li>
          <li><a href="#sec8" class="list-group-item">SSC CGL Posts and Salary</a></li>
          <li><a href="#sec9" class="list-group-item">Miscellaneous Information</a></li>

        </ul>
      </div>
      <!--/left-->

      <div id="collapse_menu" style="text-align: center;">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="background-color: #8310d5; border: none;">Collapsible Menu</button>
        <div id="demo" class="collapse">
          <div class="col-md-3" id="leftCol1">

            <ul class="nav nav-stacked" id="sidebar1" style="width: auto; ">
              <li><a href="#sec0" class="list-group-item">SSC CGL 2020 Exam Date</a></li>
              <li><a href="#sec1" class="list-group-item">SSC CGL Eligibility Criteria</a></li>
              <li><a href="#sec2" class="list-group-item">Online Application</a></li>
              <li><a href="#sec3" class="list-group-item">SSC CGL Exam Pattern</a></li>
              <li><a href="#sec4" class="list-group-item">SSC CGL Syllabus</a></li>
              <li><a href="#sec5" class="list-group-item">SSC CGL Exam Centre </a></li>
              <li><a href="#sec6" class="list-group-item">SSC CGL Vacancy</a></li>
              <li><a href="#sec7" class="list-group-item">SSC CGL Cut Off</a></li>
              <li><a href="#sec8" class="list-group-item">SSC CGL Posts and Salary</a></li>
              <li><a href="#sec9" class="list-group-item">Miscellaneous Information</a></li>

            </ul>
          </div>
        </div>
      </div>




      <!--right-->
      <div class="col-md-9 ">
        <ol class="breadcrumb" style="background-color: white;">
          <li class="breadcrumb-item">
            <a href="collections.html">Exams  </a>
          </li>
          <li class="breadcrumb-item">
            <a href="collections.html">SSC  </a>
          </li>
          <li class="breadcrumb-item active">SSC CGL Exam</li>
        </ol>
        <h1 style="text-align: center; font-weight: bold; border: 3px; padding: 15px; background-color: #8310d5; color: #ffffff; " id="sec0">SSC CGL Exam Date & Notification - 2020</h1>
        <p>
          SSC CGL exam is conducted by stuff Selection Commission for the recruitment of candidates in group B and C posts in various departments. The full form of SSC CGL is Staff Selection Commission Combined Graduate Level.</p>

        <hr>

        <h2>SSC CGL 2020 Exam Date</h2>
        <p>The tetative dates of the SSC CGL 2020 exam is announced by the Stuff Selection Commission.</p>
  

        </div><!--/right-->
<!--    right column here
 -->   

 <div class="col-sm-2 sidenav" id="related_plant" style="background-color: white; text-align: left;">
      <h3>Related Exams</h3>
      <p><a href="azalea.html" >SSC CHSL Exam</a></p>
      <p><a href="begonia.html" >SSC MTS Exam</a></p>
      <p><a href="carnation.html" >SSC JE Exam</a></p>
      <p><a href="chrysanthemum.html" >SSC Sub Inspector Exam</a></p>
      <p><a href="cyclamen.html" >SSC Stenographer</a></p>
      <p><a href="cyclamen.html" >SSC GD Constable exam</a></p>
      <p><a href="daffodils.html" >SSC JHT</a></p>
      <p><a href="lavender.html" >SSC Selection Post</a></p>
    </div>
  </div><!--/row-->
</div><!--/container-->


<script type="text/javascript">
  /* activate sidebar */
$('#sidebar').affix({
  offset: {
    top: 235
  }
});

/* activate scrollspy menu */
var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
  target: '#leftCol',
  offset: navHeight
});


</script>

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>

<script type="text/javascript">
  $(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');

});
</script>
<footer class="container-fluid text-center" style="margin-top: 5%;">
  
   <a href="home.html" >Home</a> | <a href="collections.html" >Exams</a> | <a href="about.html" >Academic</a> | <a href="privacy.html" >Privacy</a> | <a href="contact.html" >Contact</a>
   <p style="margin-top: 1%;" >@2020 examhotwire.com</p><br>
</footer>



</body>
</html>

score 1 · Accepted Answer

注意你的css导入首先你导入css，然后是fontawesome，然后是你的css文件，然后再次从cdn导入引导程序。这意味着首先导入引导程序，然后用自己的 css 覆盖这些类，然后再次导入引导程序覆盖自定义 css 上的默认类。

解决方案是删除最后一个引导导入<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">。它会解决你的问题

score 0 · Accepted Answer

始终在 boostrap 脚本之上加载 jquery 脚本，以便引导程序正常工作。

像这样 -

<script src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

html - 如何阻止某些引导类全局激活？

2 回答 2

Related

Reference