扩展Boostrap以包含额外的小内联表单

问题描述

 < form role =formclass =form-内联> 
< div class =form-group> 
< div class =input-group> 
< div class =input-group-addon> 
< span class =hidden-xs>数量< / span> 
< span class =hidden-sm hidden-md hidden-lg>数量< / span> 
< / div> 
< input class =form-controltype =quantityvalue =1> 
< / div> 
< / div> 
< button type =submitclass =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>加入购物车< / span> 
< / button> 
< / form> 
  

小到大：

超小：

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

CSS

<$ p $ .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 =formclass =form-inline form-inline-xs> 
< div class =form-group> 
< div class =input-group> 
< div class =input-group-addon> 
< span class =hidden-xs>数量< / span> 
< span class =hidden-sm hidden-md hidden-lg>数量< / span> 
< / div> 
< input class =form-controltype =emailvalue =1> 
< / div> 
< / div> 
< button type =submitclass =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>加入购物车< / span> 
< / button> 
< / form> 
  

然而，我错过了一些东西，因为结果不是内联的（就像在第一张图片中一样） ：

然后（我应该在发布之前完成）查看源代码，看起来我需要更多的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标签，
 .form-inline.form-inline-xs .checkbox标签
 {
填充-left：0; 
} 
 .form-inline.form-inline-xs .radio input [type =radio]，
 .form-inline.form -inline-xs .checkbox input [type = 复选框] 
 {
位置：相对; 
 margin-left：0; 
} 
 .form-inline.form-inline-xs .has-feedback .form-control-feedback 
 {
 top：0; 
} 
  

I started by using the default bootstrap inline form:

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

Small to Large:

Extra Small:

So I though I would extend bootstrap using to support extra small inline forms:

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>

However, I'm missing something as the result isn't inline (as in the first image):

JsFiddle Example

解决方案

After (what I should have done before posting) looking at the source code, it appears I need more 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;
}

这篇关于扩展Boostrap以包含额外的小内联表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！