如何将input元素设置为具有相同的span容器宽度

Question

这似乎是一个微不足道的问题，但我没有成功地做到这一点：

这是我的HTML代码：

<div class="row">
    <div class="well span12 form-inline muse-src-evt-bar">
        <div class="row">
            <div class="span4">
                <input type="text" class="input-medium search-query" style="width: 100%"/>              
            </div>
            <div class="span8">
                test
            </div>
        </div>
    </div>
</div>

您可以注意到input元素具有style="width: 100%"属性，但似乎设置的宽度超过span4容器宽度。

所以：

1. 我想知道为什么它会像这样，以免再次重复此错误
2. 我该如何解决这个问题？

感谢

Answer 1

当您设置style="width:100%"时，它展示span12的属性并覆盖span4。我认为这可能是背后的原因。您可以尝试删除样式，它会在input

中设置span4