Because others might have the same problem, I’ll post the answer I found for myself:

There’s a line that’s missing in the code. A meta line.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

For some reason this meta tag prevents Google Chrome from screwing their dev tools up.

I’ve been working on a MVC web application. So far everything has worked out fine, expect that one single thing. Basically, my problem is, that while attempting and succeeding in making the toggle button of my navbar disappear when the site has a certain size, my navbar is no longer responsive, as it no longer adapts its size to the screen.

Here is my entire button and navbar code:

Here is my environment:

     <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
until here

            <div class="navbar-header navbarnone">
                <button type="button" class="navbar-toggler-icon navbarbutton" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="X" asp-action="Index">X</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="x" asp-action="Index">x</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="X" asp-action="Privacy">x</a>
                    </li>
                    <partial name="_LoginPartial" />
                </ul>
            </div>

And here the CSS code for the mediaquery:

@media screen and (min-width: 768px) {
    .navbarnone {
        display: none;
    }
}