Bootstrap 3 input-group-addon losing markup

时间:2018-05-24 17:21:35

标签: css twitter-bootstrap-3

Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.

<?php
<div class="col-md-6">
    <div class="input-group has-success has-feedback" id="add_km_tarief_div">
        <label for="add_km_tarief_div">Tarief</label>
        <span class="input-group-addon">€</span>
        <input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
        <span class="input-group-addon">p/km</span>
        <span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
    </div>
</div>
?>

1 个答案:

答案 0 :(得分:0)

Try With This  
      <div class="col-md-6">
            <div class="input-group has-success has-feedback" id="add_km_tarief_div">
                <label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
                <span class="input-group-addon">€</span>
                <input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
                <span class="input-group-addon">p/km</span>
                <span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
            </div>
        </div>
    Css:
    .addyourclassname{float:left}
    .addyourownclass{float: left;
        position: relative;
        top: 0;}