首页新闻招聘找找看知识库

bootstrap中的radio在添加了disabled属性之后,在移动端(ios)上显示的样式不正常

0
[待解决问题]

代码如下:

<label class="radio-inline">
<input type="radio" name="gender" id="gender" value="1" checked="" disabled="disabled">男
</label>

<label class="radio-inline">
<input type="radio" name="gender" id="gender" value="1" checked="" disabled="disabled">女
</label>
样式问题:
表示女的radio的左边有个小缺口,在移动端(ios)上显示如下图,在android上显示没有此现象。


always_strive的主页 always_strive | 菜鸟二级 | 园豆:202
提问于:2018-02-11 11:12
< >
分享
所有回答(1)
0

添加下面的css试试

.radio-inline+.radio-inline { 
    margin-left: 15px;
}
dudu | 园豆:40436 (高人七级) | 2018-02-11 17:58

刚才试过了,还是那样。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-11 18:08

@always_strive: 可以不用radio-inline

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-11 18:12

@dudu 我把radio-inline删除了,效果还是那样子😂

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-11 18:25

@always_strive: 那就不是bootstrap的样式引起的,检查一下你自己写的css代码

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-11 18:28

@dudu 去掉disabled属性,可以正常显示,但是加上disabled属性,就有那种现象,我认为应该是disabled属性的问题,所以我就一直在调查bootstrap对disabled属性的样式是如何写的,然而没有发现问题😓

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-11 18:34

@always_strive: 应该是iOS上的Sarafi给disabled加了默认样式

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-11 18:47

@dudu: 我在谷歌浏览器上也试了下,还是那种情况,所以我这会也不知道怎么解决了。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 09:05

@always_strive: 用-webkit-appearance: none;试试

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 09:17

@dudu:刚才给所有的radio添加了-webkit-appearance: none;然而显示的效果是radio button消失了,只剩下后面的字。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 09:28

@always_strive: 能否提供一下能重写这个问题的完整html代码

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 09:33

@dudu: 

<!Doctype html>
<html><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row" style="margin-top:3em;">
      <div class="col-md-12">
        <label class="radio-inline">
          <input type="radio" name="gender" id="gender" value="1" checked="" disabled="disabled"></label>
        <label class="radio-inline">
            <input type="radio" name="gender" id="gender" value="2" disabled="disabled"></label>
      </div>
    </div>
  </div>
  <script src="jquery-1.9.1.min.js"></script>
  <script src="bootstrap.min.js"></script>
</body>
</html>

这边我想上传引用的文件,但是没有上传按钮,所以只能把代码写在这里了。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 09:51

@always_strive: 问题重现了,只在iPhone真机访问时会出现,在模拟器中不会出现,正在想办法解决

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 10:55

@dudu: 嗯,在aos上是ok的,但是在ios上就是这样,麻烦这位大神了,嘿嘿。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 10:58

@always_strive: 已确认是bootstrap引起的,但还没找出具体是哪个css定义引起的

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 11:24

@dudu: 感觉好奇怪,我自己再看下css,不过已经把目标锁定了,谢谢你啦

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 11:26

@always_strive: 是字体引起的

支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 13:21

@dudu: 哦,是吗,这么神奇,我正在这check呢,那我应该给html设置哪个字体呢,大神。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 13:27

@always_strive: 目前只找到一个解决方法:

  • 不使用bootstrap的格栅布局
  • 不使用bootstrap的radio-inline样式
  • 添加Times英文字体
    示例代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    @media screen and (max-width: 768px) {
        .gender-container {
          font-family: Times, "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
      }
    </style>
    </head>
    <body>
    <div class="container">
        <div style="margin-top:3em;">
            <div class="gender-container">
                <label>
                    <input type="radio" name="gender" id="gender" value="1" checked="" disabled="disabled"></label>
                <label>
                    <input type="radio" name="gender" id="gender" value="2" disabled="disabled"></label>
            </div>
        </div>
    </div>
    </body>
    </html>
支持(0) 反对(0) dudu | 园豆:40436 (高人七级) | 2018-02-12 15:00

@dudu: 确实成功了,谢谢大神这么费心,帮我解决问题。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-12 15:06

@dudu: 大神,我发现了一个问题,就是radio后面的字如果是"字母"或者"数字"的话,就不生效了。

支持(0) 反对(0) always_strive | 园豆:202 (菜鸟二级) | 2018-02-13 10:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册