Question

我无法将提交按钮与表单中的输入字段对齐

HTML

<div class="row" align="center">
    <form id="form" name="form" style="width:80%">

        <div class="form-group col-md-6 col-sm-12 col-xs-12">
            <label for="ptxt">Name:</label> 
            <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
        </div>


        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="qtxt">Qty:</label> 
            <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
        </div>

        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="ctxt">Cost per Item:</label>
            <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
        </div>

            <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>

    </form>
</div>

如果我添加一个标签和与输入字段相同的属性，那么它的位置正确但是太大而且我不想/需要标签

<div class="row" align="center">
<form id="form" name="form" style="width:80%">

    <div class="form-group col-md-6 col-sm-12 col-xs-12">
        <label for="ptxt">Name:</label> 
        <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
    </div>


    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="qtxt">Qty:</label> 
        <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
    </div>

    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="ctxt">Cost per Item:</label>
        <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
    </div>

    <div class="form-group col-md-2 col-sm6 col-xs-6">
        <label for="submit">.</label>
        <button name="submit" id="submit" type="button" value="+" class="btn btn-success form-control"><span class="glyphicon glyphicon-plus"></span></button>
    </div>

</form>
 </div>

总而言之，我试图让按钮看起来像第一张图片，但第二张图片中的对齐方式。

Answer 1

添加2个额外的引导列：

<div class="row" align="center">
<form id="form" name="form" style="width:80%">
    <div class="col-xs-11">
        <div class="form-group col-md-6 col-sm-12 col-xs-12">
            <label for="ptxt">Name:</label>
            <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
        </div>


        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="qtxt">Qty:</label>
            <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
        </div>

        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="ctxt">Cost per Item:</label>
            <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
        </div>

        <div class="col-xs-1">
            <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
        </div>
    </div>
</form>

Answer 2

添加一个虚拟css类（在本例中为abc）

<div class="row" align="center">
    <form id="form" name="form" style="width:80%">

        <div class="form-group col-md-6 col-sm-12 col-xs-12">
            <label for="ptxt">Name:</label> 
            <input id="ptxt" autocomplete="off" type="text" name="ptxt[]" placeholder="Part" class="form-control"/>
        </div>


        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="qtxt">Qty:</label> 
            <input id="qtxt" type="number" name="qtxt[]" placeholder="Quantity" value="1" min="0.5" class="form-control"/>
        </div>

        <div class="form-group col-md-2 col-sm6 col-xs-6">
            <label for="ctxt">Cost per Item:</label>
            <input id="ctxt" type="text" name="ctxt[]" class="form-control"  />
        </div>
        <div class="form-group col-md-2 col-sm6 col-xs-6 abc">
           <button name="submit" id="submit" type="button" value="+" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
        </div>


    </form>
</div>

并将保证金列为3％

.abc {
    margin-top: 3%;
}

这是一个jsfiddle https://jsfiddle.net/jk5hksue/

按钮不符合输入字段

2 个答案: