关于checkbox-inline和radio-inline的疑问

来源:3-8 表单控件(复选框和单选按钮水平排列)

苏苏_Web前端工程师

2016-12-07 11:06

搞不懂为什么要用"checkbox-inline"和"radio-inline",如果是跟案例中一样,把每一个单选框放到一个单独的div中,那么radio-inline类并不能让它们一行显示,如果一个div里面放所有的单选框,那么不需要radio-inlie类就已经是一行显示了;checkbox-inline也是类似的。求大神解释,我用的是火狐浏览器。代码和运行结果截图如下所示:

58477c9d000165b905000168.jpg

58477c9d00012d3a05000174.jpg


写回答 关注

7回答

  • 慕丝1033313
    2017-07-03 18:01:44

    是否可以不用div呢?加radio-inline和不加是什么区别呢?

  • Nick_arron
    2017-03-05 22:11:55

    个人理解,本例中并没有把每个单选框都放在一个单独的div中,而是所有的label标签放在div中,label标签肯定是要有的,而radio-inline只是设置了一些样式,margin之类的,有间距,看着更舒服点。

  • qq_于是_1
    2017-02-21 10:49:44

    确实是在一个div里 不用加 checkbox-inline也是在一行的,可能是有错误吧,

  • qq_于是_1
    2017-02-21 10:48:20

    我试了一下,

    <form role="form">

        <div class="form-group checkbox-inline">

        <label>

            <input type="checkbox"value="option1">有戏

        </label>

        </div>

        <div class="from-group checkbox-inline">

        <label >

            <input type="checkbox"value="option1">摄影

        </lable>

        </div>

        <div class="from-group checkbox-inline">

        <label>

            <input type="checkbox"value="option1">摄影

        </lable>

    </div>

    </from>

    这样可以并列一行,但是不能在label上定义,而是在 div上,三个div在一行了

  • qq_雪落
    2016-12-08 16:41:34

    如果你每个label都嵌套在div里,就给div添加radio-inline或  checkbox-inline,可以实现水平。(ps:因为刚才看完前一节,思维惯性,我第一次就是这么写的)

    bpdqxy...

    在现实格式上有差别

    2019-02-25 21:29:08

    共 2 条回复 >

  • qq_雪落
    2016-12-08 16:35:30

    刚开始学这个,不是很懂,只是发现你label的父级div的类是radio  而不是form-group

  • 慕容3578883
    2016-12-07 11:11:28

    简化代码增强语义

    苏苏_Web...

    好吧,如果这么说的话倒是可以理解,只是课程上的解释容易误导别人啊,o(^▽^)o

    2016-12-07 11:52:32

    共 1 条回复 >

玩转Bootstrap(基础)

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

314546 学习 · 2275 问题

查看课程

相似问题