html - 输入组未扩展以填充 100% - bootstrap 3

Question

我正在试验 Bootstrap 3，在创建表单时遇到了一个简单的问题。我有一个标签和一个输入文本框，但由于某种原因我无法让文本框自动填充 100% 的可用宽度。如果我强制 width:100% 然后它溢出到下一行。不确定我在这里做错了什么，但我粘贴了截图和 fiddle 。感谢您的帮助。

提前致谢

<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%，您会疯狂地试图找出原因。