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菜单放置

回答

相关问题