jquery - 删除了宽度样式，仍然没有改变。查询？

Question

编辑:如果我将输入的宽度设置为一个像素，它会改变大小，但如果我尝试将其设置为百分比，它不会改变。我在同一个 div 中有其他输入，它们按百分比更改大小，但不使用 typeahead 和 tt-query 类

我找到了这个脚本，我已经让它工作了。问题是当我尝试让它响应时，我无法更改输入框或下拉列表的宽度。

CSS

        <script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'../searchchem.php?key=%QUERY',
        limit : 10
    });
});
    </script>
        <style type="text/css">
            .bs-example{
            font-family: sans-serif;
            position: relative;
            margin: 5px;
            }
            .typeahead, .tt-query, .tt-hint {
            border: 2px solid #CCCCCC;
            border-radius: 8px;
            font-size: 12px;
            line-height: 30px;
            padding: 8px 20px;
            }
            .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;
            }
            .tt-suggestion {
            font-size: 12px;
            line-height: 24px;
            padding: 3px 20px;
            }
            .tt-suggestion.tt-is-under-cursor {
            background-color: #0097CF;
            color: #FFFFFF;
            }
            .tt-suggestion p {
            margin: 0;
            }

</style>

HTML

<form action="search.php" method="post">
                                            <input type="text" name="typeahead" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
                                            <input type="submit" value="Search">
                                        </form>

Jquery

https://jsfiddle.net/fet3vuc0/

我提前为 jquery 在一条线上道歉，我不确定如何更改它。

Answer 1

我认为您看到的是浏览器给定的元素的初始宽度。如果你剥离你的表单，让它只有文本输入和按钮，文本输入仍然有一个初始宽度，在浏览器中略有不同。但是如果您更改浏览器窗口的宽度，该宽度将不会调整。

通常使用响应式，您会使用 Media Queries 设置样式.这允许您根据浏览器窗口的大小提供不同的宽度。

请注意，IE8 及更低版本的 IE 不支持媒体查询。

更新

随着您对问题的更新:

尝试使用 box-sizing在您的文本输入上。