Twitter Bootstrap和typeahead不能一起正常工作

下面的Jade代码

body div.container div.jumbotron h2 What do you want to find? form(action='/search', method='get') div.input-group input.typeahead.form-control( type='text', name='q', placeholder='Search' ) div.input-group-btn button.btn.btn-default(type='submit') i.glyphicon.glyphicon-search 

转换为这个HTML（根据Chrome的F12）：

 <div class="container"> <div class="jumbotron"> <h2>What do you want to find?</h2> <form action="/search" method="get"> <div class="input-group"><span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" class="typeahead form-control tt-hint" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input type="text" name="q" placeholder="Search" class="typeahead form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-found-torrents"></div></div></span> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> </div> 

如果你运行它，你会得到以下结果：

https://jsfiddle.net/kbjLmqeh/

正如你所看到的，由于bootstrap和typeahead之间的一些无效的交互，input框没有正确的大小。

我该如何解决？

Answer 1

显然有人解决它，在这个jsfiddle中 ，通过更改CSS文件。

这是CSS：

 .twitter-typeahead { width: 100%; position: relative; } .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin: 0; width: 100%; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .has-warning .twitter-typeahead .tt-query, .has-warning .twitter-typeahead .tt-hint { border-color: #c09853; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .twitter-typeahead .tt-query, .has-error .twitter-typeahead .tt-hint { border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-success .twitter-typeahead .tt-query, .has-success .twitter-typeahead .tt-hint { border-color: #468847; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .twitter-typeahead .tt-query:focus, .twitter-typeahead .tt-hint:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } .has-warning .twitter-typeahead .tt-query:focus, .has-warning .twitter-typeahead .tt-hint:focus { border-color: #a47e3c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } .has-error .twitter-typeahead .tt-query:focus, .has-error .twitter-typeahead .tt-hint:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } .has-success .twitter-typeahead .tt-query:focus, .has-success .twitter-typeahead .tt-hint:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } .twitter-typeahead .tt-hint { color: #a1a1a1; z-index: 1; border: 1px solid transparent; } .input-group .twitter-typeahead .tt-query { z-index: 2; } .input-group .twitter-typeahead:first-child .tt-query, .input-group .twitter-typeahead:first-child .tt-hint { border-radius: 4px 0 0 4px !important; } .input-group .twitter-typeahead:last-child .tt-query, .input-group .twitter-typeahead:last-child .tt-hint { border-radius: 0 4px 4px 0 !important; } .input-group .twitter-typeahead .tt-query, .input-group .twitter-typeahead .tt-hint { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; } .input-group.input-group-sm .twitter-typeahead:first-child .tt-query, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { border-radius: 3px 0 0 3px !important; } .input-group.input-group-sm .twitter-typeahead:last-child .tt-query, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { border-radius: 0 3px 3px 0 !important; } .input-group.input-group-sm .tt-query, .input-group.input-group-sm .tt-hint { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-query, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-radius: 6px 0 0 6px !important; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-query, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-radius: 0 6px 6px 0 !important; } .input-group.input-group-lg .tt-query, .input-group.input-group-lg .tt-hint { height: 45px; padding: 10px 16px; font-size: 18px; line-height: 1.33; } .tt-dropdown-menu { width: 100%; min-width: 160px; margin-top: 2px; padding: 5px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .tt-suggestion.tt-is-under-cursor a { color: #fff; } .tt-suggestion p { margin: 0; } 

Answer 2

希望这会有所帮助：您可以自己调整button，使其与input一起内嵌，并使input100％宽度。

玉

 body .container .jumbotron h2 What do you want to find? form(action='/search', method='get') .form-group .input-group input.typeahead.form-control(type='text', name='q', placeholder='Search') .input-group-btn button.btn.btn-default.btn-search(type='submit') i.glyphicon.glyphicon-search 

请参阅工作示例代码段。

 var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; $('.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); 

 /*Typeahead 100% Width*/ .twitter-typeahead { width: 100%; position: relative; } /*Style Typeahead*/ .typeahead:focus { border: 2px solid #0097cf; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999; } .tt-menu { width: 100%; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 0; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; } .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } /**Adjust the Button**/ .input-group .input-group-btn .btn-search { margin-top: -5px; } /**Adjust Jumbotron below 768px**/ @media (max-width: 767px) { .jumbotron { padding: 15px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <body> <div class="container"> <div class="jumbotron"> <h2>What do you want to find?</h2> <form action="/search" method="get"> <div class="form-group"> <div class="input-group"> <input type="text" name="q" placeholder="Search" class="typeahead form-control" /> <div class="input-group-btn"> <button type="submit" class="btn btn-default btn-search"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </div> </form> </div> </div> </body>