首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何正确对齐引导程序中的复选框和标签?-Howtoproperlyaligncheckboxandlabelsinbootstrap?

作者：説悢沵xb | 来源：互联网 | 2023-05-19 04:56
Ihavetworowsofcheckboxesandlabels.Althoughhorizontalalignmentisnotanissue,howeverthe

I have two rows of checkboxes and labels.Although horizontal alignment is not an issue , however there is a problem of vertical alignment of second column.How can I achieve a symmetry in this case?

我有两行复选框和标签。虽然水平对齐不是问题，但是存在第二列垂直对齐的问题。在这种情况下如何实现对称?

JSfiddle

JSfiddle

As you can see the alignment of Moday and Friday (checkbox and label) is not proper.

如您所见，Moday和Friday(复选框和标签)的对齐不合适。

3 个解决方案

#1

5  

I've updated your fiddle with a fixed width on the wrapping div .col-md-4 and positioned the labels using float with the width of each label set to take 1/3 of the parents width using the calc function:

我已经更新了包装div . coll -md-4的固定宽度的小提琴，并使用float将标签放置在每个标签的宽度设置为使用calc函数的父母宽度的1/3的位置:

label{
    float: left; 
    width: calc(100%/3)
}

#2

2  

What if you wrap each checkbox with a col-sm-3 box?

如果您将每个复选框都封装在colsm -3框中呢?

https://jsfiddle.net/hobs766o/1/

https://jsfiddle.net/hobs766o/1/

#3

1  

JsFiddle DEMO

JsFiddle演示

.col-md-4.first label {
    display: block;
    width: 99px;
    float: left;
}
.col-md-4.second label {
    display: block;
    width: 99px;
    float: left;
}


推荐阅读
  • go

    十大经典排序算法动图演示+Python实现

    十大经典排序算法动图演示+Python实现
    本文介绍了十大经典排序算法的原理、演示和Python实现。排序算法分为内部排序和外部排序，常见的内部排序算法有插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。文章还解释了时间复杂度和稳定性的概念，并提供了相关的名词解释。 ... [详细]
  • java

    【Vue】表单 input 绑定

    网址：https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令，在 ... [详细]
  • java

    bootstrapselect设置container之后，选择完之后options不隐藏？

    本文讨论了使用bootstrapselect插件设置container后，选择完选项后options不隐藏的问题，给出了解决方法，并提供了相应的jsfiddle链接进行演示。 ... [详细]
  • java

    undefined err_url in mult_submits

    UsingPMA-2.5.2-rc2onPHP-4.1.2andnothavingDROPTABLEprivilege,whenI-sel ... [详细]
  • java

    vue 如何监听事件动态传至给子组件

    点击后defaultEducation的值明明改变了，但props传给子组件却watch不到 ... [详细]
  • filter

    阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾

    阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾
    本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]
  • install

    安装mysqlclient失败解决办法

    安装mysqlclient失败解决办法
    本文介绍了在MAC系统中，使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中，可以解决安装mysqlclient失败的问题。同时，还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • install

    Android 新闻App的本地服务器搭建教程

    本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • go

    Open judge C16H: Magical Balls 快速幂+逆元问题解析

    本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • post

    的错误消息：

    ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • go

    Go Cobra命令行工具入门教程

    Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中，如Kubernetes、Hugo和Github CLI等。通过使用Cobra，我们可以快速创建命令行工具，适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • java

    手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

    本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • post

    如何在codeigniter中识别angularjs请求

    本文讨论了如何在codeigniter中识别来自angularjs的请求，并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax()，但都没有成功。最后，作者展示了一个ajax请求的示例代码。 ... [详细]
  • sum

    Spark实现高斯朴素贝叶斯模型的低配版

    本文介绍了使用Spark实现低配版高斯朴素贝叶斯模型的原因和原理。随着数据量的增大，单机上运行高斯朴素贝叶斯模型会变得很慢，因此考虑使用Spark来加速运行。然而，Spark的MLlib并没有实现高斯朴素贝叶斯模型，因此需要自己动手实现。文章还介绍了朴素贝叶斯的原理和公式，并对具有多个特征和类别的模型进行了讨论。最后，作者总结了实现低配版高斯朴素贝叶斯模型的步骤。 ... [详细]
  • sum

    使用n3-charts绘制以日期为x轴的数据

    本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]
author-avatar
説悢沵xb
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有