Bootstrap导航栏定位

时间:2018-04-12 10:01:19

标签: html css bootstrap-4

我对bootstrap相当新,所以不要真正了解所有类。过去一天我一直试图和他们一起玩,或者添加我自己的新手来让它工作但是没用。

基本上在以下索引页面中,我有一个输入字段和搜索/提交按钮。然而,搜索按钮位于输入下方,我希望它在它旁边。有人帮忙吗?

<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
   <div class="container">
      <a class="navbar-brand" href="index.php">L'amour</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
         <ul class="navbar-nav">
            <li class="nav-item float-left">
               <a class="nav-link float-left" href="order.php">Contact Us</a>
            </li>
            <li class="nav-item float-left">
               <a class="nav-link float-left" href="testimonials.php">Testimonial</a>
            </li>
            <li class="nav-item float-left">
               <form method="post">
                  <div class="form-group">
                     <input class="form-control" type="text" name="search" placeholder="Search for wedding...">
                     <input method="post" name="submit" class="btn w_search form-control" type="submit" value="submit" >
                  </div>
               </form>
            <li>
         </ul>
         <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
               <a class="nav-link" href="order.php">Order Wesbite</a>
            </li>
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Account
               </a>
               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                  <a class="dropdown-item" href="signIn.php">Login</a>
                  <a class="dropdown-item" href="sign-up">Sign up</a>
                  <a class="dropdown-item" href="homeUser.php">Account details</a>
                  <a class="dropdown-item" href="logout.php">Logout</a>
               </div>
            </li>
         </ul>
      </div>
   </div>
</nav>

1 个答案:

答案 0 :(得分:0)