html - 无法将登录按钮放在导航栏的右侧

标签 html css twitter-bootstrap

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>


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

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0" type="submit">Login</button>

    </form>
  </div>
</nav>



</body>
</html>

我想将登录按钮放在导航栏的右侧,但不能做到向右拉、向右浮动、向右导航都行不通

最佳答案

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>


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

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0" style="float: right" type="submit">Login</button>

    </form>
  </div>
</nav>



</body>
</html>

关于html - 无法将登录按钮放在导航栏的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48067019/

相关文章:

javascript - 单击 Button 不会向下钻取 Table Bootstrap 4 和 JS 和 JQuery 中的元素

html - 无法让 Bootstrap 导航正确显示

javascript - 如何用ajax关闭模态框?

html - Bootstrap 非流体 IE7 布局

HTML 电子邮件问题

jquery:slideToggle 和 scrollTo 在 ajax 加载的 html 文件中不起作用

CSS3 : Overlaying a gradient image over a DIV

javascript - $ ("input[type=username]").val() 返回未定义

html - apache 中的文件夹不解释 html

javascript - 重置 HTML 5 表单 Firefox 后,红色边框仍出现在输入中