Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #24319
Closed
Open
Issue created Oct 10, 2017 by Administrator@rootContributor

.ml-auto class is bugged on IE10 in navbar

Created by: AdrianKuriata

Hi, i checked page wiht BS4 on IE 10, windows 10. I added .ml-auto to .navbar-nav and this is floated to right, navbar is not visible, i needed change .nabvar-collapse to max-width: 60% for good display navigation.

This is code for navigation:

<!-- Navigation -->
<nav class="navbar fixed-top sticky-top navbar-expand-lg navbar-light nav-font-size bg-light">
    <div class="navbar-brand-desktop d-none d-lg-block">
        <a class="navbar-brand" href="#">
            <img src="images/firm-glogow-ulotka-logo-glowna.png" alt="Ulotki na Tablica Głogów" class="img-responsive" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class="navbar-brand-mobile d-block d-lg-none w-100">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="show-navbar-search float-right">
            <a class="btn btn-link color-green">
                <i class="fa fa-search" data-toggle="tooltip" data-placement="bottom" data-title="Wyszukaj"></i>
            </a>

            <div class="show-navbar-search-content">
                <input type="text" name="search" placeholder="Wpisz nazwę firmy lub branży" class="form-control search-navbar-form-control" />
            </div>
        </div>
        <div class="show-navbar-search float-right">
            <a class="btn btn-link color-green">
                <i class="fa fa-sort-alpha-asc" data-toggle="tooltip" data-placement="bottom" data-title="Sortuj wyniki"></i>
            </a>

            <div class="show-navbar-search-content">
                <select name="sort" class="form-control custom-select search-navbar-form-control">
                    <option selected>Wybierz sortowanie</option>
                    <option value="1">Wg tytułu rosnąco</option>
                    <option value="2">Wg tytułu malejąco</option>
                    <option value="3">Wg dodania rosnąco</option>
                    <option value="4">Wg dodania malejąco</option>
                </select>
            </div>
        </div>
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link color-green" href="#">O projekcie</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#">Nowości</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-sand font-weight-bold" href="#">Dodaj ulotkę</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#">Współpraca</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#"><i class="fa fa-sign-in d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Logowanie"></i> <span class="d-lg-none">Logowanie</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#"><i class="fa fa-envelope d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Kontakt"></i> <span class="d-lg-none">Kontakt</span></a>
            </li>
            <li class="nav-item d-lg-none">
                <a class="nav-link color-green" href="#"><i class="fa fa-facebook d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Zobacz nas na Facebooku"></i> <span class="d-lg-none">Facebook</span></a>
            </li>
            <li class="nav-item d-none d-lg-block">
                <div class="show-navbar-search">
                    <a class="btn btn-link color-green">
                        <i class="fa fa-search" data-toggle="tooltip" data-placement="bottom" data-title="Wyszukaj"></i>
                    </a>

                    <div class="show-navbar-search-content">
                        <input type="text" name="search" placeholder="Wpisz nazwę firmy lub branży" class="form-control search-navbar-form-control" />
                    </div>
                </div>
            </li>
            <li class="nav-item d-none d-lg-block">
                <div class="show-navbar-search">
                    <a class="btn btn-link color-green">
                        <i class="fa fa-sort-alpha-asc" data-toggle="tooltip" data-placement="bottom" data-title="Sortuj wyniki"></i>
                    </a>

                    <div class="show-navbar-search-content">
                        <select name="sort" class="form-control custom-select search-navbar-form-control">
                            <option selected>Wybierz sortowanie</option>
                            <option value="1">Wg tytułu rosnąco</option>
                            <option value="2">Wg tytułu malejąco</option>
                            <option value="3">Wg dodania rosnąco</option>
                            <option value="4">Wg dodania malejąco</option>
                        </select>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>
Assignee
Assign to
Time tracking