Why doesn't it follow the dropdown link?

Question

css

Hello, I made a bootstrap dropdown example

<li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        href="/trainings/">Trainings</a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="/trainings/eyeliners/">Eyeliners</a>
                                        <a class="dropdown-item" href="/trainings/lips-blush/">Lips blush</a>
                                        <a class="dropdown-item"
                                            href="/trainings/powedered_ombre_eyebrows/">Powedered Ombre Eyebrows</a>
                                        <a class="dropdown-item" href="/trainings/henna_eyebrow_design/">Henna Eyebrow Design</a>
                                        <a class="dropdown-item" href="/trainings/eyelash_lift_tint/">Eyelash lift and tint</a>
                                    </div>
                                </li>

But for some reason on mobile devices, does not open the link

<a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        href="/trainings/">Trainings</a>

How to make it go on mobile too, for example, one tap to open the menu, the second transition