BootStrap - Índice de Menus e Barras de Navegação(NavBars)-Expand

O objetivo dessa página é exibir como o Navbar funciona e se ele estiver dentro de um container ocupará a largura máxima desse container. No caso vou retirar o container para que o navbar ocupe a tela inteira.

Largura da tela:

navbar-expand-xl:



navbar-expand-lg:



navbar-expand-md:



navbar-expand-sm:



O importante é frisar que xl, lg,md e sm não definem como o navbar deve ser exibido, como tamanho de letras, altura, etc mas sim quando que ele deverá ser quebrado quando a tela for reduzida de tamanho.

Observações:
1-Redimensione a tela do browser para ver o efeito.

2-O fato do navbar ser xl, lg, md ou sm não implica no tamanho do navbar mas sim no espaço para exibição do menu. Ele precisa de no mínimo x pontos para ser exibido em linha senão será exibido um item abaixo do outro.

O XL é tudo na mesma linha se o browser tiver mais de 1184 pixels de largura, se não, será cada um em uma linha.

O LG é tudo na mesma linha se o browser estiver tamanho maior que 980px, se não, será cada um em uma linha.

O MD é tudo na mesma linha se o browser estiver tamanho maior que 750px, se não, será cada um em uma linha.

O SM é tudo na mesma linha se o browser estiver tamanho maior que 560px, se não, será cada um em uma linha.

Código da página


<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">


    <link rel="stylesheet" href="../../BootstrapEngine/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../BootstrapEngine/js/bootstrap.min.js"></script>
    <script src="../../BootstrapEngine/js/bootstrap.js"></script>
    <title>BootStrap - Classe Nav-Expand</title>
    <script>
        function largBrowser() {
            //alert(document.getElementById("tam").value); ok
            var x = document.getElementById("tam");
            x.value = document.body.offsetWidth;
        }
    </script>
    <style>
        #fix {
            position:fixed;
            right: 0px;
        }
    </style>
</head>
<body style="font-family:arial;" onresize="largBrowser();">
    <nav class="navbar navbar-light mb-4" style="background-color:aqua">
        <div class="container">
            <div class="navbar-brand mb-0 h1">
                <h3>NavBar - Barras de Navegação - NavBars - Expand</h3>
            </div>
        </div>
    </nav>

    <span align="right" id="fix">
        Largura da tela:
        <input type="text" value="Teste" id="tam" maxlength="10" />
    </span>
    <br />

    navbar-expand-xl:<br />
    <nav class="navbar navbar-expand-xl bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

    navbar-expand-lg:<br />
    <nav class="navbar navbar-expand-lg bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

    navbar-expand-md:<br />
    <nav class="navbar navbar-expand-md bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

    navbar-expand-sm:<br />
    <nav class="navbar navbar-expand-sm bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

    <p>
        Observações:<br />
        1-Redimensione a tela do browser para ver o efeito.<br /><br />
        2-O fato do navbar ser xl, lg, md ou sm não implica no tamanho do navbar
        mas sim no espaço para exibição do menu. Ele precisa de no mínimo x pontos para
        ser exibido em linha senão será exibido um item abaixo do outro.<br /><br />
        O XL é tudo na mesma linha se o browser tiver mais de 1184 pixels de largura, se não, será
        cada um em uma linha.<br /><br />
        O LG é tudo na mesma linha se o browser estiver tamanho maior que 980px, se não, será
        cada um em uma linha.<br /><br />
        O MD é tudo na mesma linha se o browser estiver tamanho maior que 750px, se não, será
        cada um em uma linha.<br /><br />
        O SM é tudo na mesma linha se o browser estiver tamanho maior que 560px, se não, será
        cada um em uma linha.<br /><br />
    </p>

    <script>largBrowser();</script>
</body>
</html>