关于div中标签的排列问题

来源:3-14 表单提示信息

flanklins

2017-04-23 22:14

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

写回答 关注

1回答

  • 慕粉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>    


    flankl...

    你说的这个我知道,我想问的问题是:如果删去lable标签那么icon的span便会出现在input下方?

    2017-04-24 17:24:09

    共 1 条回复 >

玩转Bootstrap(基础)

告诉你使用Bootstrap,并且能够独立定制出适合自己的Bootstrap

314546 学习 · 2275 问题

查看课程

相似问题