html - 如何在右侧进行搜索？

Question

<nav class="navbar navbar-default">
                    <div class="container-fluid">

                        <div class="navbar-header">
                            <button type="button" id="sidebarCollapse" style="background-color: #7726E5; color: white; display:inline-block;" class="btn navbar-btn">
                                <i class="fas fa-align-left"></i>
                                <span>Menu</span>
                            </button>
                            <form style="display:inline-block;" class="form-inline my-2 my-lg-0" action="{% url 'posts_list_url' %}">
                                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search">
                            </form>
                        </div>
                    </div>
                </nav>

这是我的代码。我使用 Bootstrap 4不要看它:kljkldfsgjldfskgjl dfklj dkfjk dakfj kljd kj kdlsjfklj kldasjfk dkfj lkdsjf klsadfjlkds di

Answer 1

你必须减少很多不需要的div，你会得到你想要的。查看文档了解更多详细信息 ( https://getbootstrap.com/docs/4.2/components/navbar/#forms )

#sidebarCollapse {
  background-color: #7726E5;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-light bg-light">
  <button type="button" id="sidebarCollapse" class="btn navbar-btn">
     <i class="fas fa-align-left"></i>
     <span>Menu</span>
  </button>
  <form class="form-inline my-2 my-lg-0" action="{% url 'posts_list_url' %}">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search">
  </form>
</nav>