Question

我使用Bootstrap设计了一个屏幕。我添加了一个带有typehead功能的输入。但是在添加之后，响应性[例如最小化或最大等的大小调整]变为无效。

以下是我想要的示例照片：

但是现在这就是我得到的：

＆＃13;

 
         $(document).ready(function(){
         	$('input.typeahead').typeahead({
         		name: 'accounts',
         		local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
         		
         	});
         });

＆＃13;

         .bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 30px;
         line-height: 30px;
         outline: medium none;
         padding: 8px 12px;
         width: 0px;
         }
         .typeahead {
         background-color: #FFFFFF;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 24px;
         line-height: 24px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
      
	  
      
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test Responsive</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">Person</label>
                        <div class="col-sm-5" id = "empid" >
                           <div class="input-group ">                      
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>							    
                              <input type="text" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="textemployeeid"  id="textemployeeid"  placeholder="Enter"> 
                              <span class="input-group-btn">
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true"></i></span>
                              </button>    
                              </span>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

＆＃13;

请帮我解决这个问题。谢谢

Answer 1

您需要将此类添加到您的css：

已编辑：我已将display:block !important;添加到课程

.twitter-typeahead {
                  width: 100%;
                  display:block !important;
         }

顺便说一下，它已经回答过了：

Typeahead problems with Bootstrap 3.0 RC1

希望这会有所帮助。

＆＃13;

$(document).ready(function(){
         	$('input.typeahead').typeahead({
         		name: 'accounts',
         		local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
         		
         	});
         });

＆＃13;

.bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 30px;
         line-height: 30px;
         outline: medium none;
         padding: 8px 12px;
         width: 0px;
         }
         .typeahead {
         background-color: #FFFFFF;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 24px;
         line-height: 24px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }
        .twitter-typeahead {
                  width: 100%;
                  display:block !important;
         }

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	  <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
      
	  
      
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test Responsive</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">Person</label>
                        <div class="col-sm-5" id = "empid" >
                           <div class="input-group ">                      
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>							    
                              <input type="text" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="textemployeeid"  id="textemployeeid"  placeholder="Enter"> 
                              <span class="input-group-btn">
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true"></i></span>
                              </button>    
                              </span>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

＆＃13;

Bootstrap：如何正确地使这些元素响应

1 个答案: