输入组未扩展以填充 100% - 引导程序 3

Question

我正在尝试使用 Bootstrap 3，在创建表单时遇到了一个简单的问题。我有一个标签和一个输入文本框，但由于某种原因，我无法让文本框自动填充 100% 的可用宽度。如果我强制 width:100% 那么它会溢出到下一行。不知道我在这里做错了什么，但我已经粘贴了截图和小提琴。任何帮助表示赞赏。

提前致谢

<div class="row row-top-buffer row-bottom-buffer">
    <div class="col-md-3 row-label">Title:</div>
    <div class="input-group">
        <input type="text" class="form-control input-text" placeholder="title">
    </div>
</div>

.row-top-buffer {
    padding-top: 21px;
}

.row-bottom-buffer {
    padding-bottom: 15px;
}

.row-label {
    font: 14px "OpenSans-Bold";
    color: #4d4d4d;
    text-align: left;
    vertical-align: top;
    padding-top: 7px;
    padding-bottom: 7px;
}

.input-group .form-control.input-text {
    border-radius: 5px;
    box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .1 );
    -webkit-box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .1 );
    color: #566266;
    position: relative;
    outline: none;
}

jsFiddle

Answer 1

我多次遇到同样的问题。

请注意，输入、选择、文本区域元素没有让 CCS 为输入字段设置默认最大宽度。它超越了 100%，你会发疯地试图找出原因。

Answer 2

我会使用横向表格。请参阅http://getbootstrap.com/css/#forms 下的“水平表单”部分。

Updated Fiddle

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-8 section">
            <div class="row section-header">
                    <h2>Edit details</h2>
    
            </div>
            <!-- .section-header -->
            <div class="row row-top-buffer row-bottom-buffer form-horizontal">
                <div class="form-group">
                    <label for="title" class="col-xs-3 control-label row-label">Title</label>
                    <div class="col-xs-9">
                        <input type="text" class="form-control input-text" id="title" placeholder="title" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-xs-3 control-label row-label">Full Name</label>
                    <div class="col-xs-9">
                        <input type="text" class="form-control input-text" id="name" placeholder="full name" />
                    </div>
                </div>      
                <div class="form-group">
                    <label for="streetaddress" class="col-xs-3 control-label row-label">Street Address</label>
                    <div class="col-xs-9">
                        <input type="text" class="form-control input-text" id="streetaddress" placeholder="street address" />
                    </div>
                </div>                     
            </div>
            <div class="row section-footer"> <a href="#">[Reset]</a>
    
            </div>
            <!-- .section-header -->
        </div>
    </div>
</div>

我还在 form-horizo​​ntal 类上添加了左/右 15px 填充。