twitter-bootstrap - Bootstrap 文本框未拉伸(stretch)全宽

Question

为什么我的表单中的文本框没有在全尺寸屏幕上进一步拉伸(stretch)？好像比较短!

<!-- row: 4 -->
<div class="row base-padding fill-dark">
    <div class="col-md-8 no-padding">
        <h2 class="white base-padding-bottom">SIGN UP FOR OUR NEWSLETTER</h3>
        <p class="light-grey">Receive exclusive promotions, <strong>free passes</strong> for <strong>family and friends</strong> and links to our weekly ad!</p>
        <br>
    </div>
    <div class="col-md-4 no-padding">
        <h2 class="white base-padding-bottom">EMAIL ADDRESS</h3>
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="exampleInputEmail2">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
    </div>
</div>

Answer 1

当您使用 Bootstrap 中包含的内联表单时，您必须为 input 设置宽度。手动。

From the Bootstrap documentation :

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

设置 input 时，您似乎需要使用像素 (px) 值。宽度。当我尝试用百分比值设置它时，它不能正常工作，至少在我这边。

如果您在样式表中添加这样的内容，您应该能够根据需要调整文本框的大小。只需将 256 更改为您需要的长度即可。

.form-inline .form-control {
width: 256px;
}

如果我正确理解 Bootstrap 文档，它不会使用 .form-inline在较小的屏幕(<768px 宽)上进行样式设置，所以你应该没问题。希望这可以帮助。