Django/Bootstrap: некоторые основные стили работают не так, как ожидалось (nav-tab, button)

При использовании Django с Bootstrap (v5) кажется, что класс "nav-tabs" не стилизуется под вкладки, а серые кнопки не стилизуются под таблетки. Похоже, что работает только часть(?) Bootstrap. Почему так?

Я пробовал использовать Bootstrap v4 и v5 без изменений.

enter image description here

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
    </head>
    <body>
        <div class="text-center bg-primary text-white">
            <h3>My Site!</h3> 
        </div>
        
        <div class="container-fluid text-center">
            
          <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
          </ul>
        </div>

        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>Filter</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <button type="btn btn-outline-primary">Reset</button>
                  <button type="btn btn-outline-primary">Filter</button>
              <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Success!</strong>
                </div>
            </div>
            <div class="col-sm-4">
              <h3>Select View</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            </div>
            <div class="col-sm-4">
              <h3>Chart</h3>        
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            </div>
          </div>
        </div>       
    </body>
</html>

Ок, так что вкладки работали, потому что неупорядоченный список и каждый lineitem должны были иметь специальное упоминание в синтаксисе их классов, как это...

<ul class="nav nav-tabs">
<li class="nav-item">
    <a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#menu2">Menu 2</a>
</li>
</ul>
Вернуться на верх