`
luren85
  • 浏览: 86107 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

bootstrap checkbox radio 与label对不齐的问题

 
阅读更多

在使用bootstrap的时候发现了一个很奇怪的问题,没有找到原因。

 

就是使用html的页面显示checkbox 或者 radio的时候 label与控件是对齐的,但是如果是通过jsp加载的就产生对不齐的现象。

 

也没有找到原因是为什么,不过找到了解决的办法,从bootstrap.css中找到了如下css代码:

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  *margin-top: 0;
  /* IE7 */

  margin-top: 1px \9;
  /* IE8-9 */

  line-height: normal;
}

 

进行了简单的修改,修改后的代码:

input[type="radio"],
input[type="checkbox"] {
  margin: -3 -3 0 0;
  *margin-top: 0;
  /* IE7 */

  margin-top: -3px \9;
  /* IE8-9 */

  line-height: normal;
}

 

然后再看页面上的效果就正常了。

 

 

  • 大小: 41.6 KB
  • 大小: 39.8 KB
分享到:
评论

相关推荐

    Bootstrap3 多选和单选框(checkbox)

    对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 。 默认外观(堆叠在一起) ...

    Bootstrap复选框和单选按钮美化插件(推荐)

    需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。 checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制...

    BootStrap中的表单大全

     对于表单中的input、textarea、select,一般我都会加上类”form-control”,它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单)。并且每个元素(包括label和待输入元素)都会加上”form-group”。它的...

    Bootstrap CSS布局之表单

    input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form fieldset legend 1.1.基础表单 <!--基础表单: 1.向父 <form> 元素添加 role="form"。 2.把标签label和控件...

    Bootstrap3 内联单选和多选框

    通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。 <label class=checkbox-inline> <input type=checkbox id=inlineCheckbox...

    Bootstrap所支持的表单控件实例详解

    Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。 输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有...

    Bootstrap表单组件教程详解

    bootstrap仅对表单内的fieldset、legend、label标签进行了定制 fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-...

    完全深入学习Bootstrap表单

    前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括...

    Bootstrap表单控件学习使用

    Bootstrap表单控件的学习使用,供大家参考,具体内容如下 输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的...

    Bootstrap源码解读表单(2)

    对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。 这些元素如果使用了类名“form-...

    全面解析Bootstrap表单使用方法(表单控件)

     在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])...

    ZendFramework中文文档

    创建你的bootstrap文件 7.1.2.5. 创建默认的控制器(Action Controller) 7.1.2.6. 创建你的视图脚本 7.1.2.7. 创建你自己的错误控制器 7.1.2.8. 访问站点! 7.2. Zend_Controller 基础 7.3. 前端控制器 ...

Global site tag (gtag.js) - Google Analytics