html - 扩展 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 using 以支持超小的内联表单:

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;
}