Вкладки Dynami c не работают. Я подозреваю, что файл bootstrap css конфликтует с моим css файлом

Question

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;
}

Я пытался удалить с основного. css и код работает. Итак, я думаю, что это проблема, но я не понимаю, что ее вызывает и как ее решить. Правильно ли мое предположение? Я просто не понимаю причину этого, потому что я думал, что правила bootstrap будут более специфичны для класса c и таким образом перезаписывают правило в main.css?

Answer 1

это потому что bootstrap используйте !important в некоторых строках, если вы хотите изменить этот код, вы должны использовать также для перезаписи