如何將Bootstrap 4 navbar li元素轉移到右側？

-1

我想將李元素轉移到右側。如何將Bootstrap 4 navbar li元素轉移到右側？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
 
    <a class="navbar-brand" href="#">Navbar</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 class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <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" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

我已經alread試過這個CSS代碼，但它打破了toggler和導航欄。

@media (min-width: 768px) { 
    .navbar-nav { 
    float: left; 
    margin: 0; 
    } 
    .navbar-nav > li { 
    .pull-right(); 
    &:first-child { 
     .pull-left(); 
    } 
    } 
    .navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    } 
}

所以我想在不破壞切換器或導航欄的情況下移動li元素。謝謝。

來源

2017-10-16 n00b

你有沒有嘗試過文本對齊的問題？例如：'.navbar-nav {0} {0} {0}} text-align：right; }' – UncaughtTypeError

是的。這沒有用。 – n00b

這很奇怪，它在我在瀏覽器中試用時有效。 – UncaughtTypeError

添加justify-content-end和刪除mr-auto：

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</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 class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> 
    <ul class="navbar-nav"> 
     <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" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    </div> 
</nav>

（我測試過沒有你的CSS這個解決方案）

來源

2017-10-16 09:58:36 zdolny

Nah。這沒有用。我也一樣。此外，我不使用任何外部CSS除Bootstrap。 – n00b

對，我編輯了我的答案，用'justify-content-end'對我來說工作正常 – zdolny

@zdolny如果工作正常，只需在代碼段中分享。 –

添加此類

.navbar-nav .nav-link { 
    padding-right: 0; 
    padding-left: 0; 
    text-align: right; 
}

，並刪除你的類

@media (min-width: 768px) { 
.navbar-nav { 
    float: left; 
    margin: 0; 
    } 
    .navbar-nav > li { 
    .pull-right(); 
     &:first-child { 
    .pull-left(); 
    } 
    } 
    .navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    } 
    }

來源

2017-10-16 10:04:57

沒有。這根本不起作用。 – n00b

如何將Bootstrap 4 navbar li元素轉移到右側？

回答

相關問題