Bootstrap 4 - Di chuyển các liên kết đến bên phải của thanh điều hướng bằng nút bật tắt

Question

Tôi đã cố di chuyển các liên kết từ bên trái của thanh điều hướng sang bên phải và nó sẽ không cho phép tôi. Tôi đã cố gắng thả nó sang bên phải và không có gì xảy ra, cùng với vị trí: tương đối; bên phải: 200px; và padding-right: -200px ;. Nếu bất cứ ai có bất kỳ đề xuất nào khác, nó sẽ được đánh giá cao cảm ơn bạn.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 

    <button class="navbar-toggler navbar-toggler-right" 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> 

    <a class="navbar-brand" href="index.html"> 

     <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt=""> 

    </a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 

     <ul class="navbar-nav mr-auto"> 

      <li class="nav-item"> 
       <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="services.html">Services</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="portfolio.html">Portfolio</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="about.html">About</a> 
      </li> 

     </ul> 

    </div> 
</nav> 

Answer 1

Bạn đang sử dụng .mr-auto vì vậy bạn phải margin-right: auto !important và nav-mục còn liên kết.
Nếu bạn thay đổi lớp để .ml-auto bạn có margin-left: auto !important và nav-mục của bạn được ngay thẳng

Answer 2

Sửa đổi một số css trong bootstrap:

Dùng justify-content: end; để bắt đầu nội dung cho cuối

.mr-auto { 
    margin-right: 0 !important; 
} 
.navbar-toggleable-md .navbar-collapse {   
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
} 

Đây là mã fiddle: https://jsfiddle.net/0ewenvcb/2/