`
luren85
  • 浏览: 86758 次
  • 性别: 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
分享到:
评论

相关推荐

    漂亮的Checkbox Radio漂亮样式

    还可以使用CSS框架,如Bootstrap或Materialize CSS,它们提供了预设的Checkbox和Radio样式,只需简单引入库即可实现美观的样式。另外,JavaScript库如jQuery UI也能提供更丰富的交互效果。 在实际项目中,可能还...

    bootstrap 设置checkbox部分选中效果

    在上述代码中,`<input type="checkbox">`是实际的复选框,而`<label>`则提供了可点击的文本区域,与复选框关联。 当我们需要根据后台数据动态设置复选框状态时,通常需要将数据库中的数据转换成JavaScript数组,...

    checkbox radio select 样式修改样例

    通过`for`属性将`label`与对应的`input`关联,我们可以操作`label`的样式,从而影响到`checkbox`或`radio`的视觉反馈。 例如,可以这样编写HTML和CSS: ```html <input type="checkbox" id="myCheckbox"> <label ...

    自定义radio&checkbox;样式

    3. 使用JavaScript库:如jQuery UI、Bootstrap等框架提供了跨浏览器的组件,包括自定义的Radio和Checkbox样式。 总之,自定义Radio和Checkbox样式是提高网页设计美感的重要手段。通过熟练运用CSS3选择器,我们可以...

    jQuery美化radio和checkbox

    1. 自定义CSS:jQuery本身并不直接改变元素的外观,但可以通过选择器选中radio和checkbox,然后应用CSS来改变它们的样式。例如,你可以隐藏原生的input元素,然后创建自定义的UI元素,如使用`<label>`配合`:before`...

    BootStrap表单控件之复选框checkbox和单选择按钮radio

    Bootstrap 表单控件之复选框Checkbox和单选择按钮Radio Bootstrap框架提供了多种表单控件,包括复选框Checkbox和单选择按钮Radio。这些控件可以帮助开发者快速搭建Web应用程序的表单界面。 复选框Checkbox ...

    Bootstrap3 多选和单选框(checkbox)

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

    checkbox-radio-select样式自定义

    在本项目"checkbox-radio-select样式自定义"中,我们将探讨如何对这些元素进行自定义,以提供更符合设计需求或品牌风格的视觉体验。 一、`checkbox`和`radio`样式自定义: 默认情况下,浏览器为`checkbox`和`radio`...

    Bootstrap单选按钮和复选框美化特效

    3. **应用到HTML**:最后,将新创建的CSS类应用到Bootstrap的`<input type="checkbox">`和`<input type="radio">`元素上,并通过`<label>`包裹它们,以便于用户交互。 ```html <div class="form-check custom-...

    AxureRP8的bootstrap4元件库

    4. **表单组件**:包括输入框(input)、选择框(select)、复选框(checkbox)、单选按钮(radio)等,以及相应的标签(label)和错误提示(error message)。 5. **卡片(card)**:卡片是Bootstrap 4中一种通用的布局组件,...

    HTML的checkbox和radio样式美化的简单实例

    然后,使用`+`选择器来选择紧跟着`checkbox`或`radio`的`label`元素,对其进行样式化。 对于`checkbox`的美化,主要步骤如下: 1. `label`元素设置为`display: inline-block;`,使其能与文本一起排列。 2. 设置`...

    Bootstrap单选按钮和复选框美化特效特效代码

    在Bootstrap中,单选按钮(radio buttons)和复选框(checkboxes)是用户界面中常见的交互元素,用于收集用户的选择信息。然而,Bootstrap的默认样式可能相对朴素,有时需要进行个性化美化以提升用户体验。 本资源...

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

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

    bootstrap-4.6.0_css_

    6. **表单控件**:Bootstrap提供了一套统一的表单样式,包括输入框`input`,选择器`select`,复选框`checkbox`,单选按钮`radio`等,以及表单相关的布局类,如`.form-group`,`.form-control`等。 7. **按钮**:...

    Bootstrap3.0预定义样式

    4. **表单**:预定义的表单控件样式包括`.form-control`输入框,`.form-group`布局,以及`.checkbox`和`.radio`复选框和单选按钮。表单布局也有水平、垂直和内联三种形式。 5. **导航**:Bootstrap3.0的导航组件...

    bootstrap笔记总结

    `checkbox`和`radio`按钮分别对应`.checkbox`和`.radio`类,`name`属性对于`radio`按钮尤其重要,确保它们是一组。扩展表单功能,可以使用`.input-prepend`,`.add-on`和`.input-append`类,创建带有附加元素的...

    表单Checkbox元素美化特效.zip

    对于jQuery,可能还涉及了一些插件,比如“iCheck”或“bootstrap-checkbox”,这些插件提供了一套完整的Checkbox和Radio美化解决方案,包括多种皮肤和动画效果。它们通常会提供API供开发者自定义配置,比如更改颜色...

    Bootstrap源码解读表单(2)

    为了使它们与label标签对齐,Bootstrap建议将它们包裹在`.checkbox`或`.radio`容器内,并且将input元素和label一起放置。通过这样的结构,Bootstrap可以方便地调整复选框和单选框的位置,确保视觉上的统一和一致性。...

    BootStrap中的表单大全

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

Global site tag (gtag.js) - Google Analytics