具有响应式下拉列表筛选器的搜索表单

我需要在以下搜索表单中制作响应式下拉列表筛选器。具有响应式下拉列表筛选器的搜索表单

  <!DOCTYPE html> 
     <html lang="en"> 
     <head> 
      <meta charset="utf-8">    

       <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 
      <style type="text/css"> 
       body { 
      padding-top: 50px; 
     } 
     .dropdown.dropdown-lg .dropdown-menu { 
      margin-top: -1px; 
      padding: 6px 20px; 
     } 
     .input-group-btn .btn-group { 
      display: flex !important; 
     } 
     .btn-group .btn { 
      border-radius: 0; 
      margin-left: -1px; 
     } 
     .btn-group .btn:last-child { 
      border-top-right-radius: 4px; 
      border-bottom-right-radius: 4px; 
     } 
     .btn-group .form-horizontal .btn[type="submit"] { 
      border-top-left-radius: 4px; 
      border-bottom-left-radius: 4px; 
     } 
     .form-horizontal .form-group { 
      margin-left: 0; 
      margin-right: 0; 
     } 
     .form-group .form-control:last-child { 
      border-top-left-radius: 4px; 
      border-bottom-left-radius: 4px; 
     } 

     @media screen and (min-width: 768px) { 
      #adv-search { 
       width: 500px; 
       margin: 0 auto; 
      } 
      .dropdown.dropdown-lg { 
       position: static !important; 
      } 
      .dropdown.dropdown-lg .dropdown-menu { 
       min-width: 500px; 
      } 
     } 
      </style> 
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
     </head> 
     <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="input-group" id="adv-search"> 
         <input type="text" class="form-control" placeholder="Search for snippets" /> 
         <div class="input-group-btn"> 
          <div class="btn-group" role="group"> 
           <div class="dropdown dropdown-lg"> 
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> 
            <div class="dropdown-menu dropdown-menu-right" role="menu"> 
             <form class="form-horizontal" role="form"> 
              <div class="form-group"> 
              <label for="filter">Filter by</label> 
              <select class="form-control"> 
               <option value="0" selected>All Snippets</option> 
               <option value="1">Featured</option> 
               <option value="2">Most popular</option> 
               <option value="3">Top rated</option> 
               <option value="4">Most commented</option> 
              </select> 
              </div> 
              <div class="form-group"> 
              <label for="contain">Author</label> 
              <input class="form-control" type="text" /> 
              </div> 
              <div class="form-group"> 
              <label for="contain">Contains the words</label> 
              <input class="form-control" type="text" /> 
              </div> 
              <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
             </form> 
            </div> 
           </div> 
           <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 

     </script> 
     </body> 
     </html>

下拉列表的宽度应该与默认宽度一样。它在大型设备中工作正常，但宽度因小设备而异。你可以得到代码片段https://bootsnipp.com/snippets/featured/advanced-dropdown-search。任何帮助表示赞赏。

来源

2017-09-04 Yhenew Addis

任何小提琴链接请 – Swapna

嗯，这是不干净的，但它会解决你的实际问题。只需添加：

@media (max-width: 768px) { 
    .dropdown-menu { 
     width:calc(100vw - 30px); 
     right:-39px; 
    } 
}

注意，你会改变自举类SI它会影响未来下拉菜单，你以后可能会包括。如果您将自己的类添加到菜单以使用此代码，那么更好。

来源

2017-09-04 08:39:46

具有响应式下拉列表筛选器的搜索表单

回答

相关问题