twitter-bootstrap – Bootstrap文本框未拉伸全宽

发布时间：2020-12-18 00:21:42 所属栏目：安全来源：网络整理

导读：为什么我的表单中的文本框不能在全尺寸屏幕上进一步拉伸？看起来很短！ !-- 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"Re

为什么我的表单中的文本框不能在全尺寸屏幕上进一步拉伸？看起来很短！

<!-- 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>

解决方法

使用Bootstrap中包含的内联表单时,必须手动设置输入的宽度.

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.

在设置输入宽度时,您似乎需要使用像素(px)值.当我尝试使用百分比值设置它时,它无法正常工作,至少在我的最后.

如果您在样式表中添加这样的内容,则应该能够根据需要调整文本框的大小.只需将256更改为您需要的时间.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!