我如何居中此bootstrap4导航栏的所有内容

时间:2018-11-29 19:18:07

标签: html5 css3 bootstrap-4

谁能告诉我如何在此bootstrap 4导航栏中将所有链接居中。尝试过类似问题的大量建议已无济于事。

html

.navbar {
        background-color: rgba(0, 0, 0, 0.521)!important;
        border-color: rgba(0, 0, 0, 0.486)!important;
        color: white!important;
    }
    
    .navbar a {
        color: white !important;
        text-align: center;
    }
    
    .nav-tabs > li{
        float:none !important;
        display:inline-block !important;
    }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-expand-lg fixed-bottom navbar-dark bg-dark">
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
    
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <div class="navbar-nav float-right text-right pr-3">
                <a class="nav-item nav-link" href="#">About <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Skills</a>
                <a class="nav-item nav-link" href="#">Portfolio</a>
                <a class="nav-item nav-link disabled" href="#">Blog</a>
                <a class="nav-item nav-link disabled" href="#">Contact</a>
            </div>
        </div>
    </nav>

任何帮助将不胜感激。

0 个答案:

没有答案