将内联表单向右移动到导航

我的代码为https://codepen.io/hby123/project/editor/ANGLnn，如何将内联表单移动到右侧？我正在使用Boostrap 4.我试图使用float-right类，但它不起作用。我在这里错过了什么。将内联表单向右移动到导航

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <!-- Meta --> 
    <meta charset="UTF-8" /> 
    <title>My Site</title> 

    <!-- Styles --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
</head> 

<body> 

    <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <div class="container"> 

     <a class="navbar-brand" href="#">My Site</a> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="background-color: lime;"> 
     <div class="navbar-nav"> 
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
      <a class="nav-item nav-link" href="#">Features</a> 
     </div> 


     <form class="form-inline"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 

     </div> 

    </div> 
    </nav> 

    <!-- Scripts --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> 

    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"> 

    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"> 

    </script> 
</body> 

</html>

来源

2017-10-16 user1187968

您可以给你的表单一个类“form-right”，并添加下面的样式如下。

.form-right{ 
width: 100% !important; 
justify-content: flex-end !important; 
}

来源

2017-10-16 23:18:38

将内联表单向右移动到导航

回答

相关问题