Как сделать поиск справа?

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>

Это мой код Я использую бутстрап 4 Не смотри на это:

Answer 1

Вам нужно уменьшить количество ненужных делений, и вы получите то, что хотите. Проверьте документацию для более подробной информации (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>

Answer 2

Вы можете попробовать это.

navbar-header{ width:100%; } and form{ float:right; }