扩展Bootstrap以包含额外的小内联形式

Question

我首先使用默认的bootstrap内联形式：

<form role="form" class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="hidden-xs">Quantity</span>
                <span class="hidden-sm hidden-md hidden-lg">Qty</span>
            </div>
            <input class="form-control" type="quantity" value="1">
        </div>
    </div>
    <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-plus hidden-sm hidden-md hidden-lg"></span>
        <span class="glyphicon glyphicon-shopping-cart"></span>
        <span class="hidden-xs">Add to Cart</span>
    </button>
</form>

从小到大：

超小：

所以我虽然会扩展bootstrap以支持额外的小型内联表单：

CSS

.form-inline.form-inline-xs .form-group
{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0px;
}
.form-inline.form-inline-xs .form-group .input-group
{
    display: inline-table;
    vertical-align: middle;
}

HTML：

<form role="form" class="form-inline form-inline-xs">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <span class="hidden-xs">Quantity</span>
                <span class="hidden-sm hidden-md hidden-lg">Qty</span>
            </div>
            <input class="form-control" type="email" value="1">
        </div>
    </div>
    <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-plus hidden-sm hidden-md hidden-lg"></span>
        <span class="glyphicon glyphicon-shopping-cart"></span>
        <span class="hidden-xs">Add to Cart</span>
    </button>
</form>

然而，由于结果不是内联的（如第一张图片中所示），我遗漏了一些东西：

JsFiddle Example

Answer 1

之后（在发布之前我应该​​做的）查看源代码，看来我需要更多的CSS：

.form-inline.form-inline-xs .input-group .input-group-addon, 
.form-inline.form-inline-xs .input-group .input-group-btn, 
.form-inline.form-inline-xs .input-group .form-control
{
    width: auto;
}

.form-inline.form-inline-xs .input-group > .form-control
{
    width: 100%;
}
.form-inline.form-inline-xs .control-label
{
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline.form-inline-xs .radio, .form-inline .checkbox
{
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline.form-inline-xs .radio label, 
.form-inline.form-inline-xs .checkbox label
{
    padding-left: 0;
}
.form-inline.form-inline-xs .radio input[type="radio"], 
.form-inline.form-inline-xs .checkbox input[type="checkbox"]
{
    position: relative;
    margin-left: 0;
}
.form-inline.form-inline-xs .has-feedback .form-control-feedback
{
    top: 0;
}