引导3内联组输入和选择按钮

Question

我知道有一些选项可以对齐内联表单，并将下拉按钮与输入字段和其他一些变体对齐，即使使用选择按钮，但只有像下拉菜单这样的小选择按钮按钮像40px宽。

我的问题是，我正在尝试使输入和长选择下拉列表像aliexpress有搜索栏。在我自己的

到目前为止，我已经尝试了各种风格的黑客，但他们没有行之有效的响应对准输入栏按钮，我也用Google搜索，但没有真正的作品。

我只得到它像这样

工作，我尝试加入搜索输入和类别，如输入按钮组。

任何人有任何想法或隐藏的代码，我找不到？

Answer 1

你需要这个。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
      </ul> 

      <form class="navbar-form" role="search"> 
       <div class="input-group"> 
        <input type="text" class="form-control pull-right" style="width: 300px; margin-right: 35px, border: 1px solid black; background-color: #e5e5e5;" placeholder="Search"> 
        <span class="input-group-btn"> 
         <button type="reset" class="btn btn-default"> 
          <span class="glyphicon glyphicon-remove"> 
           <span class="sr-only">Close</span> 
          </span> 
         </button> 
         <button type="submit" class="btn btn-default"> 
          <span class="glyphicon glyphicon-search"> 
           <span class="sr-only">Search</span> 
          </span> 
         </button> 
        </span> 
       </div> 
      </form> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

也有CSS

body { 
    padding: 60px 0px; 
} 
.navbar-collapse { 
    position: relative; 
    padding-top: 30px !important; 
    max-height: 270px; 
} 
.navbar-collapse form[role="search"] { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
    z-index: 0; 
} 
.navbar-collapse form[role="search"] button, 
.navbar-collapse form[role="search"] input { 
    padding: 8px 12px; 
    border-radius: 0px; 
    border-width: 0px; 
    color: rgb(119, 119, 119); 
    background-color: rgb(248, 248, 248); 
    border-color: rgb(231, 231, 231); 
    box-shadow: none; 
    outline: none; 
} 
.navbar-collapse form[role="search"] input { 
    padding: 16px 12px; 
    font-size: 14pt; 
    font-style: italic; 
    color: rgb(160, 160, 160); 
    box-shadow: none; 
} 
.navbar-collapse form[role="search"] button[type="reset"] { 
    display: none; 
} 

@media (min-width: 768px) { 
    .navbar-collapse { 
     padding-top: 0px !important; 
     padding-right: 38px !important; 
    } 
    .navbar-collapse form[role="search"] { 
     width: 38px; 
    } 
    .navbar-collapse form[role="search"] button, 
    .navbar-collapse form[role="search"] input { 
     padding: 15px 12px; 
    } 
    .navbar-collapse form[role="search"] input { 
     padding: 25px 12px; 
     font-size: 18pt; 
     opacity: 0; 
     display: none; 
    } 
    .navbar-collapse form[role="search"].active { 
     width: 100%; 
    } 
    .navbar-collapse form[role="search"].active button, 
    .navbar-collapse form[role="search"].active input { 
     display: table-cell; 
     opacity: 1; 
    } 
    .navbar-collapse form[role="search"].active input { 
     width: 100%; 
    } 
} 

和小JS文件

$(function() { 
    // Remove Search if user Resets Form or hits Escape! 
    $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) { 
     console.log(event.currentTarget); 
     if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') || 
      $(event.currentTarget).attr('type') == 'reset') { 
      closeSearch(); 
     } 
    }); 

    function closeSearch() { 
     var $form = $('.navbar-collapse form[role="search"].active') 
     $form.find('input').val(''); 
     $form.removeClass('active'); 
    } 

    // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting 
    $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) { 
     event.preventDefault(); 
     var $form = $(this).closest('form'), 
      $input = $form.find('input'); 
     $form.addClass('active'); 
     $input.focus(); 

    }); 
    // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission 
    // if your form is ajax remember to call `closeSearch()` to close the search container 
    $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) { 
     event.preventDefault(); 
     var $form = $(this).closest('form'), 
      $input = $form.find('input'); 
     $('#showSearchTerm').text($input.val()); 
     closeSearch() 
    }); 
});