时间戳

首页 > 解决方案 > 动态标签不起作用。我怀疑引导 css 文件与我的 css 文件冲突

css - 动态标签不起作用。我怀疑引导 css 文件与我的 css 文件冲突

问题描述

HTML 代码：

<div class="container">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
    <h3>HOME</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
    <h3>Menu 1</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
    <h3>Menu 2</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
</div>
</div>

使用的css文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" type="text/css" />

我怀疑它与我自己定义的 css 文件冲突，main.css该文件是：

*{
  box-sizing: border-box;
}
body{
    margin-top:0;
    font-family: arial;
    background-attachment: fixed;
    background-position: right top;
    background-repeat: no-repeat;
    background-size:200px 200px;
    margin-left:210px;
    margin-bottom:0px;
}

body.RNG{
  background:url("https://cdn1.dotesports.com/wp-content/uploads/2018/08/11095313/c55eb912-0c91-4d9d-a228-b26b6f12fc4b.jpg") center fixed no-repeat;
  background-size:cover;
  background-color: rgba(255,255,255,0.5);
  background-blend-mode: lighten;
  /* background-image:url("https://gamepedia.cursecdn.com/lolesports_gamepedia_en/e/e4/Invictus_Gaminglogo_square.png") */
}

  h1
  {
    padding:20px;
  }

  li
  {
    text-align: center;
  }
  ul {
    position:fixed;
    left:0px;
    height:100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
  }

  ul a {
    display: block;
    background-color: #f1f1f1;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }

  /* Change the link color on hover */
  ul a:hover {
    background-color: #555;
    color: white;
  }

  .dropdown {
    padding:8px 16px;
    position: relative;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

.icon{
    max-height: 200px;
    max-width: 200px;
    height:100%;
    float: right;
    vertical-align: top;
}

.icon:hover{
  transform:rotate(20deg);
}

.content:after
{
  clear:right;
}

.end
{
  clear:both;
}
pre {
  font-size: large;
  mix-blend-mode: difference;
  white-space: pre-wrap;
}

.col{
    background:grey;
    border-radius: 5%;
    margin:1%;
    width:30%;
    float: left;
}

footer{
    width:100%;
    height:30px;
    margin-left:-10px;
    padding: 10px 0 0 0;
    text-align: center;
    bottom:0px;
    color:white;
    background: grey;
    margin-bottom:0px;
}

我试过删除 main.css 并且代码有效。所以，我认为这是问题所在，但我不明白是什么原因造成的以及如何解决。我的猜测正确吗？我只是不明白它背后的原因，因为我认为引导规则对类会更具体，因此会覆盖规则main.css?

标签： cssbootstrap-4

解决方案

它因为引导程序!important在某些行中使用，如果您想更改此代码，您也应该使用覆盖

推荐阅读