Bootstrap：如何正確地使這些元素響應

我設計了一個屏幕使用Bootstrap.I添加了輸入typehead features.But之後添加後，響應[例如最大限度或最大等調整大小]無效。Bootstrap：如何正確地使這些元素響應

這裏是我想要什麼樣的照片：

但現在這就是我得到：


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

  .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; 
 
     }

<!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"> 
 
\t 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <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> 
 
      
 
     
 
\t 
 
     
 
    </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> \t \t \t \t \t \t \t  
 
           <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>

請幫幫我解決這個問題。謝謝

來源

2016-05-31 user5005768

你需要將該類添加到你的CSS：

編輯：我的方式添加display:block !important;類

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

它已經回答了前：

Typeahead problems with Bootstrap 3.0 RC1

希望這有助於。

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

.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; 
 
     }

<!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"> 
 
\t 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <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> 
 
      
 
     
 
\t 
 
     
 
    </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> \t \t \t \t \t \t \t  
 
           <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>

來源

2016-05-31 09:05:53 hsh

感謝@hsh。很好的解決方案。但如果仔細注意，你會將所有元素[例如：2跨度圖標和輸入元素]作爲一個組合不正確對齊。所以需要編輯。再次感謝 – user5005768

@ user5005768，我編輯了它現在的工作原理 – hsh

謝謝@hsh。現在它的工作。我看到你添加了這行'display：block！important;'。你可以告訴你這個代碼行是如何解決這個問題的。非常感謝你.. – user5005768

Bootstrap：如何正確地使這些元素響應

回答

相關問題