修复bootstrap崩溃中的尴尬过渡并删除.well中的访问链接样式

时间:2016-08-04 21:27:47

标签: javascript css twitter-bootstrap-3

div class =" well"在它完全打开后看起来是正确的,但它有一些动画,因为它滚动打开,仍然有一个边框和不同的彩色背景。我无法弄清楚如何改变它。有人可以帮忙吗?

此外,div类中的链接=" well",在访问它们之后,默认情况下它们会变为蓝色并带有下划线。如何删除下划线和访问过的颜色?

提前感谢您的帮助!

http://codepen.io/aahmed2/pen/ZOqZgg?editors=0100

上面是我的Codepen的链接,因此您可以准确地看到发生了什么。尝试点击" Cooperia"在牛区,你会看到奇怪的过渡。如果您选择"关于"然后返回我的Codepen,你会看到默认的bootstrap样式,我无法弄清楚如何删除。



a {
  color: #000;
}
a:hover {
  color: #d00000;
  text-decoration: none;
}
.animal-disease-main h3 {
  color: #fff;
  background: #c1c0be;
  padding: 10px;
}
.animal-disease-main a {
  padding-left: 20px;
}
.animal-disease-main .collapse .well {
  background: rgba(0, 0, 0, 0.02);
  border: none;
  border-radius: 0;
  padding: 10px 29px;
}
.collapse .well a {
  padding: 0;
}
.collapse .well a:visted {
  color: #000;
  text-decoration: none !important;
}
a[role="button"]:focus,
a[role="button"]:active {
  color: #d00000;
}
a[role="button"]:visted {
  color: #000000;
}

<div class="animal-disease-main">
  <div class="container">
    <div class="col-sm-4">
      <h3>Cattle</h3>
      <a href="/health-resources/anthrax.html">Anthrax</a>
      <br>
      <a href="/health-resources/bovine-tuberculosis.html">Bovine Tuberculosis</a>
      <br>
      <a href="/health-resources/brucellosis.html">Brucellosis</a>
      <br>
      <a class="animal-health-toggle" role="button" data-toggle="collapse" href="#calf-scours" aria-expanded="false" aria-controls="calf-scours">
                Calf Scours
            </a>
      <div class="collapse" id="calf-scours">
        <div class="well">
          <a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
          <br>
          <a href="https://www.ag.ndsu.edu/pubs/ansci/beef/as776.pdf" target="_blank">Fact Sheet 2</a>
          <br>
          <a href="http://www.cattlenetwork.com/cattle-resources/baby-calf-health/Calf-Scours-Causes-prevention-and-treatment-121277154.html" target="_blank">Causes, Prevention, Treatment</a>
          <br>
          <a href="http://www.extension.umn.edu/agriculture/dairy/calves-and-heifers/ten-strategies-to-battle-calf-scours/" target="_blank">Strategies for Calf Scours</a>
          <br>
          <a href="http://msue.anr.msu.edu/news/calf_scours_signs_treatment_and_prevention_part_2" target="_blank">Symptoms, Treatment, Prevention</a>
          <br>
          <a href="http://www1.agric.gov.ab.ca/$department/deptdocs.nsf/all/faq8072" target="_blank">FAQ</a>
        </div>
      </div>
      <br>
      <a role="button" data-toggle="collapse" href="#cooperia" aria-expanded="false" aria-controls="cooperia">
                Cooperia
            </a>
      <div class="collapse" id="cooperia">
        <div class="well">
          <a href="http://cal.vet.upenn.edu/projects/merialsp/Trichosp/trich_8.htm" target="_blank">About</a>
          <br>
          <a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
          <br>
          <a href="http://parasitipedia.net/index.php?option=com_content&view=article&id=2632&Itemid=2910" target="_blank">Biology, Prevention, and Control</a>
          <br>
          <a href="http://www.progressivecattle.com/topics/herd-health/4676-cooperia-study-shows-ineffective-dewormers-costly-effects" target="_blank">Inneffective Wormers' Cost Effects</a>
        </div>
      </div>
      <br>
      <a href="/health-resources/cryptosporidium.html">Cryptosporidium</a>
      <br>
      <a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
      <br>
      <a href="/health-resources/leptospirosis.html">Leptospirosis</a>
      <br>
      <a role="button" data-toggle="collapse" href="#neosporosis" aria-expanded="false" aria-controls="neosporosis">
                Neosporosis
            </a>
      <div class="collapse" id="neosporosis">
        <div class="well">
          <a href="http://www.ars.usda.gov/News/docs.htm?docid=11007" target="_blank">Animal Overview</a>
          <br>
          <a href="http://www.merckvetmanual.com/mvm/generalized_conditions/neosporosis/overview_of_neosporosis.html" target="_blank">Disease Facts</a>
          <br>
          <a href="http://www.thecattlesite.com/diseaseinfo/222/neosporosis/" target="_blank">Cattle</a>
          <br>
        </div>
      </div>
      <br>
      <a role="button" data-toggle="collapse" href="#pink-eye" aria-expanded="false" aria-controls="pink-eye">
                Pink Eye
            </a>
      <div class="collapse" id="pink-eye">
        <div class="well">
          <a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0017/103904/pinkeye-in-cattle.pdf" target="_blank">Fact Sheet</a>
          <br>
          <a href="http://beef.unl.edu/pinkeye-in-cattle" target="_blank">Overview</a>
          <br>
          <a href="http://beef.unl.edu/cattleproduction/controllingflies" target="_blank">Fly Control</a>
          <br>
        </div>
      </div>
      <br>
      <a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>
    </div>


    <div class="col-sm-4">
      <h3>Goats and Sheep</h3>
      <a href="/health-resources/anthrax.html">Anthrax</a>
      <br>
      <a href="/health-resources/brucellosis.html">Brucellosis</a>
      <br>
      <a role="button" data-toggle="collapse" href="#cooperia2" aria-expanded="false" aria-controls="cooperia2">
                Cooperia
            </a>
      <div class="collapse" id="cooperia2">
        <div class="well">
          <a href="http://cal.vet.upenn.edu/projects/merialsp/Trichosp/trich_8.htm" target="_blank">About</a>
          <br>
          <a href="http://www.dpi.nsw.gov.au/__data/assets/pdf_file/0015/50208/treating_calf_scours_-_primefact_135-final.pdf" target="_blank">Fact Sheet</a>
          <br>
          <a href="http://parasitipedia.net/index.php?option=com_content&view=article&id=2632&Itemid=2910" target="_blank">Biology, Prevention, and Control</a>
          <br>
          <a href="http://www.progressivecattle.com/topics/herd-health/4676-cooperia-study-shows-ineffective-dewormers-costly-effects" target="_blank">Inneffective Wormers' Cost Effects</a>
        </div>
      </div>
      <br>
      <a href="/health-resources/cryptosporidium.html">Cryptosporidium</a>
      <br>
      <a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
      <br>
      <a href="/health-resources/leptospirosis.html">Leptospirosis</a>
      <br>
      <a role="button" data-toggle="collapse" href="#neosporosis2" aria-expanded="false" aria-controls="neosporosis2">
                Neosporosis
            </a>
      <div class="collapse" id="neosporosis2">
        <div class="well">
          <a href="http://www.ars.usda.gov/News/docs.htm?docid=11007" target="_blank">Animal Overview</a>
          <br>
          <a href="http://www.merckvetmanual.com/mvm/generalized_conditions/neosporosis/overview_of_neosporosis.html" target="_blank">Disease Facts</a>
          <br>
        </div>
      </div>
      <br>
      <a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>
    </div>


    <div class="col-sm-4">
      <h3>Horses</h3>
      <a href="/health-resources/anthrax.html">Anthrax</a>
      <br>
      <a href="/health-resources/leptospirosis.html">Leptospirosis</a>
      <br>
      <a href="/health-resources/vesicular-stomatitis.html">Vesicular Stomatitis</a>

      <h3>Pigs</h3>
      <a href="/health-resources/anthrax.html">Anthrax</a>
      <br>
      <a href="/health-resources/brucellosis.html">Brucellosis</a>
      <br>
      <a href="/health-resources/fmd.html">Foot and Mouth Disease</a>
      <br>
      <a href="/health-resources/leptospirosis.html">Leptospirosis</a>
      <br>
      <a href="/health-resources/swine-flu.html">Swine Flu</a> 

      <h3>Poultry</h3>
      <a href="/health-resources/anthrax.html">Anthrax</a>
      <br>
      <a href="/health-resources/avian-influenza.html">Avian Influenza</a>
      <br>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

如果你想覆盖动画行为,你应该去:

.collapsing{
  -webkit-transition: none;
  transition: none;
}

请记住,此动画包含3个状态

.collapse - &gt; .collapsing - &gt; .collapse in

http://getbootstrap.com/javascript/#collapse

因此,如果您想更改默认的Bootstrap动画,那就是您应该做的工作。

关于访问链接后的文本样式,即

a:visited { 
  color: "your-default-color";
  text-decoration: none;
}