宽度自动不占用可能的空间

Question

我正在使用Bootstrap处理Twig HTML内联表单，我遇到了问题。

内联表单的一行是这样构建的：

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-8">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="form-inline">
                                {{ form_label(form.edition) }}
                                {{ form_widget(form.edition) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="form-inline">
                                {{ form_label(form.weight) }}
                                {{ form_widget(form.weight) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

表单实际字段的form-control类来自bootstrap：

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

form-inline类会使用以下内容覆盖form-control的{​​{1}}类：

form_widget

现在我的表单看起来像这样：

有足够的空间不会填满字段，我知道如何更改它以便字段正确扩展？