问答详情
源自：3-14 表单提示信息

关于div中标签的排列问题

在div中有一个lable标签、一个input标签、两个span标签，但是它们的排列顺序不是很清楚，首先如果删去lable标签那么icon的span便会出现在input下方？另外提示信息的span一定是显示在这个div的最下方？主要问题是input标签与icon这个span的排列顺序是怎样的？

提问者：flanklins 2017-04-23 22:14

个回答

  • 慕粉1747223018
    2017-04-24 15:43:34

    bootstrap 标准是 form>div>lable input span span 
    自己还把标准格式复制运行，然后在浏览器开发都工具中看bootstap是怎么写样式的。如果不是前端工程师就不要纠结那么细。

    http://img.mukewang.com/58fdac8d0001a1b633441930.jpg

    <form role="form">

      <div class="form-group has-success has-feedback">

        <label class="control-label" for="inputSuccess1">成功状态</label>

        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >

        <span class="help-block">你输入的信息是正确的</span>

        <span class="glyphicon glyphicon-ok form-control-feedback"></span>

      </div>

      <div class="form-group has-warning has-feedback">

        <label class="control-label" for="inputWarning1">警告状态</label>

        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">

        <span class="help-block">请输入正确信息</span>

        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

      </div>

      <div class="form-group has-error has-feedback">

        <label class="control-label" for="inputError1">错误状态</label>

        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

        <span class="help-block">您输入的信息有错误的</span>

        <span class="glyphicon glyphicon-remove form-control-feedback"></span> 

      </div>

    </form>    


    0