输入组不扩展以填充100％ - bootstrap 3

Question

我正在尝试使用Bootstrap 3并在创建表单时遇到了一个简单的问题。我有一个标签和一个输入文本框但由于某种原因我无法让文本框自动填充100％的可用宽度。如果我强制宽度：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

我多次遇到同样的问题。

请注意input，select，textarea元素没有为CCS设置输入字段的默认最大宽度。它超过了100％，你疯了，试图找出原因。

Answer 2

我会使用form-horizo​​ntal。请参阅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>

我还在表单水平类上添加了15px左/右填充。