twitter-bootstrap - Bootstrap : How to correctly make these elements responsive

标签 twitter-bootstrap

我使用 Bootstrap 设计了一个屏幕。我添加了一个带有 typehead 功能的输入。但是添加后，响应能力[例如最小或最大等的大小调整]变得不活动。

这是我想要的示例照片: enter image description here

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

enter image description here 

 
         $(document).ready(function(){
         	$('input.typeahead').typeahead({
         		name: 'accounts',
         		local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
         		
         	});
         });  
         .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">
	  
      <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>

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

最佳答案

你需要将这个类添加到你的CSS中:

编辑:我将 display:block !important; 添加到类

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

顺便说一句，它之前已经回答过:

Typeahead problems with Bootstrap 3.0 RC1

希望这有帮助。

$(document).ready(function(){
         	$('input.typeahead').typeahead({
         		name: 'accounts',
         		local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
         		
         	});
         });
.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">
	  
      <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>

关于twitter-bootstrap - Bootstrap : How to correctly make these elements responsive，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37540859/

上一篇：c# - 如何使用 Roslyn 获取方法调用/类声明的全名路径

下一篇：jenkins - octopus 中的包 ID 是什么？

相关文章：

jquery - 使用固定导航栏滚动到页面顶部

html - html 中的 Canvas 问题

javascript - 如何将主题标签链接集成到网页中并根据该主题标签加载模式？

javascript - 在左侧边栏菜单中，一次只能打开一个模块

javascript - 将汉堡图标添加到 Bootstrap 侧边栏

javascript - 在ajax回调中调用bootstrap模态显示(safari)

javascript - 获取页面片段时在 Bootstrap 模式中加载脚本

html - 使用 Bootstrap 将 3 列连接到其他 3 列(无论大小)

javascript - Bootstrap 多个下拉菜单问题

CSS 不适用于 Localhost

©2024 IT工具网  联系我们