Bootstrap的v4.5复选框不能在输入旁边水平或垂直对齐
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以快速构建响应式网页。在Bootstrap v4.5中，复选框默认是垂直排列的，无法直接实现水平或垂直对齐。但是，我们可以通过自定义样式来实现这个效果。
要实现水平对齐，可以使用Bootstrap的Grid系统，将复选框包裹在一个水平布局的容器中。例如，可以使用row和col-*类来创建一个水平布局的容器，并使用form-check-inline类来使复选框水平排列。具体代码如下：
<div class="row">
<div class="col-sm-6">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="checkbox1" value="option1">
<label class="form-check-label" for="checkbox1">选项1</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
<label class="form-check-label" for="checkbox2">选项2</label>
</div>
</div>
</div>要实现垂直对齐，可以使用form-check类和d-flex类来创建一个垂直布局的容器，并使用align-items-*类来设置对齐方式。具体代码如下：
<div class="form-check d-flex align-items-start">
<input class="form-check-input" type="checkbox" id="checkbox1" value="option1">
<label class="form-check-label" for="checkbox1">选项1</label>
</div>
<div class="form-check d-flex align-items-center">
<input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
<label class="form-check-label" for="checkbox2">选项2</label>
</div>
<div class="form-check d-flex align-items-end">
<input class="form-check-input" type="checkbox" id="checkbox3" value="option3">
<label class="form-check-label" for="checkbox3">选项3</label>
</div>以上代码示例中，form-check-input类用于设置复选框样式，form-check-label类用于设置标签样式，form-check-inline类用于实现水平排列，d-flex类用于设置容器为弹性布局，align-items-*类用于设置对齐方式。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议您访问腾讯云官方网站，查找与前端开发、云计算相关的产品和服务。
相关·内容
正如标题所说:Bootstrap的复选框在靠近输入时不能水平或垂直对齐。 渲染出现问题： 📷 我已经尝试了以下代码片段，但没有很好的结果。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/
浏览 16提问于2020-10-29得票数 1
回答已采纳
2回答
表单-垂直样式
、、
我对我的项目使用，正如您可能知道的，默认的表单对齐方式是垂直的，所以标签显示在表单字段的上方。您可以添加类form-horizontal以在表单域旁边显示标签。我正在构建一个水平显示的表单，但我希望表单的一个子集是垂直对齐的。因此，我向该部分添加了类form-vertical，但它不会更改任何内容。所以我查看了bootstrap
浏览 2提问于2012-10-12得票数 0
回答已采纳
我是网络前端开发的新手，虽然我有后端和嵌入式编程经验.
我正在学习前端开发使用Bootstrap。我编写了这个简单的引导代码(可用的)作为练习。我观察到的是，当我在240 on宽显示器上查看输出时，navbar的元素垂直叠加。如何阻止navbar元素垂直堆叠，并在显示宽度减小时保持其水平对齐。但如果将select元素添加到"navbar品牌“旁边，则"navbar品牌”、“sel
浏览 1提问于2016-07-01得票数 0
回答已采纳
我有一个带有较大字体大小列表项的LongListMultiSelector。由于这种字体更改，我意识到复选框总是与实际列表项不对齐。我已经尝试在每个级别上更改水平和垂直对齐，还调整了填充和边距的值。它们改变了列表项中的文本块，但复选框保持在顶部，并使列表看起来失真。
有没有办法让复选框垂直居中或管理其填充？我意识到列表样式中有关于边距的，然而它似乎涉及到我
浏览 1提问于2013-02-26得票数 5
我刚刚发现使用data-role="fieldcontain"的div中的文本输入不会扩展到100%，但是如果你把一个文本输入放在字段fieldcontain之外，它就会扩展到最充分。这是他们正在修复的一个bug，但同时...谢谢!
浏览 0提问于2012-09-14得票数 6
回答已采纳
1回答
创建表单布局(比方说)的最简单方法是什么：| First Field [ (我对我的安卓系统有点生疏了，我想不出怎样才能把它做好。整件事情都集中在它的容器中。标签是水平对齐的，并且垂直中心与它们各自的输入框对齐(虽然我不能在上面的纯文本中表示)输入</e
浏览 6提问于2012-02-17得票数 2
回答已采纳
我想知道一个解决以下问题(有效)的算法:一个由数字1..9组成的2D矩阵，它需要从顶部(1)到底部(9)在水平线上对齐，但只能通过垂直或水平翻转另一个数字。输入矩阵示例：9 2 5 1 6 25 1 7 4 2 82 2 2 23 4 6 6 6 7 7 8
8 8 9 9 9 9
浏览 5提问于2009-08-28得票数 2
回答已采纳
我似乎不明白为什么bootstrap 3不能在较小的屏幕上正确地呈现表单-水平。有没有什么想法是我错过/弄错了？
<!width=device-width, initial-scal
浏览 0提问于2016-03-01得票数 0
2回答
作为一个学习练习，我只想使用 (或)垂直左对齐和水平拉伸输入字段。我知道引导网格(和)，但我不想使用它。下面是代码(也在上)<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css我还尝试将类直接放在输入上。
然后我删
浏览 0提问于2019-05-22得票数 0
回答已采纳
出于某种原因，我的JFrame不会显示这两种情况中的一种。注意，我的JFrame是在另一个类中创建的，并从该类中访问。另外，如果可以的话，我想知道我的代码是如何呈现和设计的？
浏览 3提问于2015-12-18得票数 0
回答已采纳
1回答
BS CSS中断NG材料的造型？
、、、、
基本上，所有这些框架和组件套件都运行得很好，但是，我发现，随着Bootstrap 3/4的存在，HTML元素(按钮、输入和复选框)在一行中的对齐看起来不太好。如果我删除引导带，他们是水平和完美地对齐。因为我仍然使用一些角度引导组件，我无法摆脱引导，因为它提供了许多好的东西，但还没有涵盖的NG材料和fxFlex。
它是好的，或建议有角材料和靴带在一起？只使用一小
浏览 2提问于2017-09-03得票数 0
1回答
我想把从"Hammadde Dağıtım“中射出的箭头分组。我怎么才能把它们合并？
浏览 5提问于2021-09-14得票数 1
回答已采纳
我似乎无法将第一行以下的文本对齐。查看页面右侧绿色大按钮"send“上方的文本。我已经尝试过display: margin left:15px只适用于第一行文本，但其余的显示方式不同。
浏览 21提问于2017-01-30得票数 0
1回答
我在我的面板标题中创建了一个搜索框，并将它们同时浮动并清除，以便将它们放在同一条线上，如下所示：
它很实用，但不太好。这个标题让我很恼火(如果你没有立即注意到图像中的垂直排列，那么垂直对齐的效果真的很差，而且在底部或水平与输入字段比较合适)，而且我不想让它变得更大，因为我的站点使用了很多这样的面板，我希望它看起来至少有点统一这让我想到，肯定有人做过这样的事情，而且可能有一种方法内
浏览 2提问于2014-08-04得票数 0
回答已采纳
我正在尝试居中对齐我的复选框，当你添加一个新的输入时，它们现在的显示方式是：。这是我使用的代码(angular和bootstrap)：<form ng-submit="todoAdd()"> });
浏览 5提问于2017-07-05得票数 0
1回答
我想把div的样式和按钮完全一样。我注意到当我给按钮一个特定的高度时，文本总是垂直地居中。哪个属性使文本垂直居中，而不需要任何附加包装？这里发生什么事情？
浏览 2提问于2018-12-28得票数 1
回答已采纳
4回答
我正在创建一个网站，我有一个登录字段，其中包含两个输入。我想垂直对齐这些项目在设计文件。<!{ color: lightblue; font-weight: bold;我希望div内部的输入与类'loginbar‘垂直居中。
浏览 3提问于2017-08-08得票数 4
回答已采纳
2回答
我写了一份关于php的联系表格。我希望输入字段和文本输出居中。因为我用form标记创建了输入字段，所以我认为如果我用form标记在CSS文件中插入对中的内容就足够了。但是，该位置忽略CSS文件(页面上的所有其他设置都在CSS文件之上工作)。可能是什么原因？
我已经尝试过.form，#form和only form，但是没有效果。其余的都能用。
浏览 2提问于2019-01-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
