Navbar菜單放置

我使用Bootstrap導航欄並進行了自定義，但當響應大小移動到移動時，漢堡菜單打開在左側，但我希望它在右側。誰能幫忙？Navbar菜單放置

http://stajniazkopyta.x10host.com/test.html

的Html -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/navbar.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Caveat"> 
    <title>Stajnia Z Zopyta</title> 
    <style>body {background-color: black;}</style> 
</head> 
<body> 

    <nav class="navbar navbar-expand-sm navbar-dark bg-none"> 
      <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="#">Navbar</a> 

        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="nav-item active"> 
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
         </li> 
            <li class="nav-item active nav-link-camps"> 
             <a class="nav-link" href="#">Camps</a> 
            </li> 
            <li class="nav-item active nav-link-sales"> 
             <a class="nav-link" href="#">Sales</a> 
            </li> 
            <li class="nav-item active nav-link-gallery"> 
             <a class="nav-link" href="#">Gallery</a> 
            </li> 
            <li class="nav-item active nav-link-contact"> 
             <a class="nav-link" href="#">Contact</a> 
            </li> 
        </ul> 

        </div> 
      </nav> 

     <script src="js/jquery.min.js"></script> 
     <script src="js/popper.min.js"></script> 
     <script src="js/bootstrap.min.js"></script>   
    </body> 
</html>

的CSS -

.navbar{ 
    border-bottom: $lobster-yellow 3px solid; 
}

來源

2017-10-05 oversoon

只要改變navbar-brand和摺疊按鈕的順序。在用於導航欄的Bootstrap V4中，他們使用了display: flex;屬性。通過使用這個內容可以像表格一樣對齊。當設備尺寸低於768px時，摺疊菜單可見，所以內容按順序排列。

另一種方法是使用媒體查詢將flex-direction: row-reverse;應用於navbar，當它低於768像素時。通過這種方法，你不需要改變你的代碼的順序，這是你的問題。

我的建議

我的建議是重新排列HTML行，我給在更新的代碼。因爲我們不需要添加自定義CSS來覆蓋默認的Bootstrap框架。

代碼

//Collapse Button 

<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> 

//Nav brand 
    <a class="navbar-brand" href="#">Navbar</a>

更新的代碼

//Nav brand 
     <a class="navbar-brand" href="#">Navbar</a> 

//Collapse Button 
<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>

圖像僅供參考

來源

2017-10-05 17:46:14

完美工作。感謝您的解釋 – oversoon

Navbar菜單放置

回答

相關問題