Twitter Bootstrap - 当容器有填充时输入越界

Question

我的容器是span4，我在其上放置了填充/边框。一切都很好，但输入也不受约束，因为它们也有span4类。我正在提供我的HTML，CSS以及显示问题的图像。

如何确保输入的宽度超出范围但不超出范围？

<div class="span4 newsletter">
    <h3>Newsletter</h3>
    <input type="text" name="name" placeholder="Name" class="span4" />
    <input type="text" name="surname" placeholder="Surname" class="span4" />
    <input type="text" name="email" placeholder="Email" class="span4" />
    <button type="submit" class="btn btn-inverse pull-right"><i class="icon-envelope icon-white"></i>Subscribe</button>
</div>

.newsletter {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: white;
}

Answer 1

尝试在输入上使用“input-block-level”类而不是“span4”。