Twitter Bootstrap и машинописный не работает вместе

Question

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 (в соответствии с 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.

Как это исправить?

Answer 1

Видимо, кто-то решит его, в this 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

Надеется, что это помогает: вы можете настроить кнопку себя так, что это рядное с входом, а также делают ширину входные 100%.

Джейд

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 

См рабочий пример Snippet.

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>