在Bootstrap中包装和垂直对齐复选框和单选按钮最合适的方式是什么？
在Bootstrap中包装和垂直对齐复选框和单选按钮最合适的方式是使用Bootstrap的表单组组件和表单行组件。
首先，使用表单组组件将复选框和单选按钮包装起来，以便进行样式和布局的控制。表单组组件可以通过添加class="form-group"来实现。
然后，在表单组组件内部，使用表单行组件来垂直对齐复选框和单选按钮。表单行组件可以通过添加class="form-check"来实现。
接下来，将复选框和单选按钮放置在表单行组件内部。复选框可以使用<input type="checkbox">元素来创建，单选按钮可以使用<input type="radio">元素来创建。同时，为了与表单行组件配合使用，需要为复选框和单选按钮添加class="form-check-input"。
最后，为了实现垂直对齐，可以在表单行组件内部的复选框和单选按钮之前添加一个label元素，并为label元素添加class="form-check-label"。这样，复选框和单选按钮就会与label元素垂直对齐。
以下是一个示例代码：
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
复选框1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
复选框2
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" id="radio1">
<label class="form-check-label" for="radio1">
单选按钮1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" id="radio2">
<label class="form-check-label" for="radio2">
单选按钮2
</label>
</div>
</div>这种方式可以实现复选框和单选按钮的包装和垂直对齐，并且利用了Bootstrap的表单组组件和表单行组件来实现样式和布局的控制。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和扩展云服务器实例。详情请参考：腾讯云云服务器（CVM）
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务，可用于存储和管理各种类型的数据。详情请参考：腾讯云对象存储（COS）
相关·内容
我有一个带有复选框和单选按钮的表单，我需要给它高度和垂直对齐到中间，以便与标签对齐(它可以有不同的行高度)
input[type="checkbox"],input[type="radio"] {
margin:0px;
vertical-align: -webkit-baseline-middle;
float: none;
height: 38px;
}
label {
line-height: 38px;
}
你可以在上看到它
浏览 4提问于2015-10-07得票数 0
我有一组单选按钮和一个提交按钮。我希望将它们并排放置，单选按钮组在左侧，提交按钮按比例在右侧对齐。使用twitter bootstrap的正确方式是什么？
目前，无论我做什么，我都会获得单选按钮组下面的按钮。
浏览 3提问于2015-01-28得票数 0
2回答
这是我从开始的，所以这个问题可能很愚蠢，但我不知道如何解决这个问题。我想把复选框和无线电按钮放在同一行(应该垂直对齐显示)，但是复选框和无线电按钮应该分组在两个分开的字段集中。我得到了这样的东西：，但是复选框显示的比无线电按钮高，把它们放在同一个div中不会改变任何事情。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.co
浏览 3提问于2015-07-09得票数 0
回答已采纳
我想在屏幕中央对齐一组Android中的复选框，并在类似于单选按钮组的同一条垂直线上对齐。我在网上搜索，但没有看到任何解决办法。
例如，我有一份调查问卷，“你为什么要去这家商店”，我有四个答案: 1.地点2.服务3.设施4.以上所有这些。用户可以选择多个答案。
如果我使用单选按钮，我只需将它们分组在一个无线电组中。我不知道如何处理复选框。或者我需要使用另一个表单小部件。
编辑过的
类似于这张图像，
浏览 4提问于2014-09-01得票数 2
回答已采纳
我在flutter应用程序的下面的屏幕上工作，但当我使用Switch widget时，它会破坏对齐，因为flutter中已经定义了硬编码的高度和宽度。
我怎样才能去掉多余的空间？
注意:使用单选按钮或复选框也会出现同样的问题
浏览 8提问于2020-02-03得票数 3
3回答
我有一个div，并且在div中有单选按钮，那么根据div中同一行中的文本垂直对齐单选按钮最简单的方法是什么
echo"<div id=\"div{$id}\" ";?>
echo"</br>
<input type= radio name=\"{$id}\" value=\"{$option1}\" >
$option1
&
浏览 3提问于2013-05-29得票数 1
回答已采纳
我想显示记住我的复选框和提交按钮内联使用Bootstrap 3在我的登录表单。
<div class="row">
<div class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" name="remembe
浏览 2提问于2016-02-15得票数 0
3回答
引导vue单选按钮
、、、
我希望1)确保单选按钮与左对齐，2)减少标签和单选按钮文本之间的垂直空间以及每个文本之间的垂直空间。
在下面的示例中，您可以看到单选按钮文本是居中的，并且在它们之间有大约一半的文本高度空间，我想减少它们之间的距离。
浏览 14提问于2022-08-24得票数 0
回答已采纳
4回答
我正在尝试解决如何正确地将文本与单选按钮对齐。我在一个单选按钮组中垂直布局了许多单选按钮，每个单选按钮都有一个TextView，它们应该与单选按钮对齐。我发现的问题是，因为单选按钮在它们自己的RadioGroup布局中，所以我不能引用RadioButton，所以它与TextView对齐。有谁知道做这件事的好方法吗？
浏览 0提问于2010-11-19得票数 0
回答已采纳
我有一个带有FontSize=20的Silverlight3的单选按钮。
在控件中，单选对话框图像被强制到顶部对齐。
相对于文本/内容，图像显得太高。这对于较小的文本尺寸并不明显，但是对于较大的文本尺寸，文本/内容和对话框图像之间的垂直对齐看起来很丑陋。关于如何在文本和对话框图像中垂直对齐= dialog有什么想法吗？
ty
浏览 2提问于2009-11-01得票数 3
回答已采纳
在使用react-admin的RadioButtonGroupInput时，
RadioButtonGroupInput的每个单选按钮总是垂直对齐。
我想把它水平对齐。
除了实现自定义组件之外，我还尝试了许多方法。但是什么都不起作用。
<RadioButtonGroupInput source="category" choices={[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle'
浏览 2提问于2019-07-17得票数 0
里面有一个带有按钮和标签的挠曲盒。显然，align-items属性不对齐按钮。我怎样才能做到这一点？
<div class="wrapper">
<div>
<button>Test</button>
</div>
<div>
<input type="checkbox" id="test" />
<label for="test">Test</label&
浏览 0提问于2015-06-09得票数 0
回答已采纳
是否可以将复选框和单选按钮包装在一个无序列表中？
如果没有，我如何垂直显示它们？
我知道这与布局有关，但仍然是一个编程问题。
浏览 1提问于2010-10-21得票数 1
回答已采纳
我在使用JS时遇到了多个问题，JS将单选按钮和复选框更改为图像，并更改了所选单选按钮和复选框上文本的字体。我认为我不能改变HTML的结构，所以我在寻找解决方法，但在看到只用CSS就可以轻松解决所有问题后，我找到了一种改变HTML结构的方法，而这个简单的CSS代码可以解决所有问题。太棒了。
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
padding: 0;
opacity: 0;
filter:alpha(opacity=0);
}
input[type=checkbox]:not(old) + lab
浏览 0提问于2016-07-18得票数 1
1回答
嗨,
我需要设计一个类似于我的附加图像的用户界面。我需要帮助设置的TextView，如它是居中对齐与单选按钮。TextView的中心位置和单选按钮的中心位置应在同一垂直线上。
浏览 1提问于2012-03-19得票数 0
使用我的测验创建器界面，用户输入三个答案，然后通过设置单选按钮标记正确的答案：
但是，我不能让文本输入和复选框很好地对齐。最好，我想这样做没有圆角之间的文本输入和复选框。就像下面的链接中显示的水平单选按钮组。而是在左侧输入文本。
。
你知道怎么做吗？
感谢:)克里斯蒂安
浏览 1提问于2012-06-15得票数 0
因此，我写了一个闪亮的应用程序，显示一些复选框和单选按钮。为了节省屏幕空间，我希望将复选框答案组织在2列中。我遵循了给定的建议，并到达了一个可接受的界面：
但是正如您所看到的，第一列是垂直移位的(我使用过label=NULL).Is --在没有标签的情况下，这两列都垂直对齐了吗？
相关代码：
shinyUI(
navbarPage("navbar",
tabPanel(strong("Buscador"),value="panel2",
tags$head(tags$style(HTML(".multicol{font-size
浏览 1提问于2016-04-27得票数 2
回答已采纳
13回答
我有一个带有单选按钮的表单，这些按钮与它们的标签在同一行上。然而，单选按钮并不与其标签垂直对齐，如下面的屏幕截图所示。
如何将单选按钮与其标签垂直对齐？
编辑：
下面是html代码：
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type=&
浏览 126提问于2012-11-22得票数 105
我有一些带有单选按钮的短信。我通过<div style="text-align:center;">对齐了它。看起来是这样的：
有没有一种方法，我可以垂直对齐所有的单选按钮_while，以确保整个事情保持中心aligne_d？
我试着用<div style="text-align:left;">分别包装单选按钮，但这并没有给出我想要的结果。
浏览 0提问于2017-10-22得票数 0
回答已采纳
如何设置与文本相关的mdRadioButton指令Angular Material的垂直对齐方式？我尝试过layout-align和vertical-align两种样式，但是单选按钮总是与文本相关的中间对齐。
是柱塞
<md-content>
<md-radio-group ng-model="data" style="vertical-align:top;">
<md-radio-button value="a" aria-label="Label 1" style=
浏览 6提问于2016-04-27得票数 3
回答已采纳
我想显示复选框和无线电按钮水平而不是垂直(sidenote:是否有计划添加此对齐选项通过属性设置在控件本身？)为此，我创建了一个额外的CSS文件，它在表单的html版本中工作。
它过去在PDF中使用4.3，但是升级到4.6.2以后就不再是这种情况了。
为了进行测试，我创建了一个@media print部分，它隐藏了标签。当将Chrome中的媒体类型更改为打印时，部分将被执行，整个复选框将被隐藏。创建PDF时，标签会被隐藏，但是复选框仍然是可见的(与对齐方式相同；它们始终保持垂直)。
从外观上看，我有正确的CSS选择器(在html中工作，在PDF中部分工作)，但是收音机和复选框是什么呢？他们没有
浏览 2提问于2014-09-25得票数 0
回答已采纳
2回答
我对单选按钮旁边的文本的对齐有问题。是关于"td“中的单选按钮。所以我想把文本“十六进制”垂直地与单选按钮对齐，但我得到的是：
我得到的那个
我想这样做：
这是我迄今为止所做的..。
HTML
<td>
<input type="radio" class="rButton" /><span class="convText">Hex</span>
</td>
CSS
.rButton{
width:13px;
height:12px;
}
浏览 2提问于2014-02-07得票数 0
回答已采纳
5回答
使用Bootstrap版本2.3.2，我有一个表单布局，类似于下面的图像，而且由于复选框有一个内联标签，因此存在对齐问题。
向input[type="checkbox"]添加页边距只会给复选框留出页边距，而不是内联标签。如何使复选框及其标签垂直对齐其旁边的文本字段？
这是，如果您感兴趣的话。
浏览 4提问于2013-10-11得票数 14
回答已采纳
6回答
我试图垂直对齐一个输入复选框的按钮在它的右边。
下面是我得到的一个例子：
如您所见，左边的2复选框不对齐(与按钮相比有点过高)，其按钮位于右侧(第一个输入是"Player Computer“，第二个是"Player1 Player2")。
使用检查器，我尝试修改这些复选框/按钮的父div上的填充和页边距，但没有结果。
浏览 5提问于2017-12-16得票数 0
回答已采纳
我必须设计一个布局，其中包含单选按钮在垂直模式中对齐，并附加了一条垂直线。每个单选按钮都被选中，具有不同的颜色。下面的图片将说明该设计。
任何人都可以指导我如何实现这个设计。
感谢并问候哈斯奈恩·艾哈迈德
浏览 0提问于2015-06-22得票数 0
请看以下图片：
如您所见，属于复选框的文本正在将相应的复选框推到左侧。我的XML很简单:1 LinearLayout与重力:中心，方向:垂直。您可以看到其他视图是CheckBox和Button。都具有相同的属性(宽度和高度: wrap_content，以及它们之间的一些空白)。
所以我的问题很简单:如何使复选框垂直对齐？
浏览 4提问于2013-10-07得票数 0
回答已采纳
1回答
我正在尝试构建一个单选按钮，在这个code中，我不能正确地使标签的垂直对齐，我想这是因为我在绝对和相对部分缺少了一些东西，尝试垂直对齐也不起作用。 有没有更好的使用flex的方法呢？ 如果我使用flex，我不能正确地分配输入中的小圆角。
浏览 6提问于2020-06-18得票数 0
回答已采纳
在我的VueJS应用程序中使用bootstrap-vue，我想在一行中放置一个按钮和一个警告，两个项垂直居中对齐。
正如您在此中看到的，按钮是对齐的，但警报没有对齐。
如何对齐所有项目？
浏览 1提问于2020-12-23得票数 0
在过去的两个小时里，我一直在钻研文档，我不知道如何用bootstrap实现单选按钮(我根本没有用react实现过，但仍然是这样)。 我找到的关于单选按钮的唯一文档是这样的：https://react-bootstrap.github.io/components/input-group/在“复选框和单选按钮”下，我甚至不知道如何给单选按钮添加文本！ 下面是我尝试过的： <InputGroup>
<InputGroup.Radio
value="hi"
aria-label="Radio button
浏览 23提问于2020-07-29得票数 1
回答已采纳
我目前正在构建一个Sencha 2应用程序，并尝试执行以下操作：
我尝试了很多事情，包括以下几点
使用单选按钮label属性并将其对齐到右边，这样做会产生不灵活的文本。
将单选按钮设为静态宽度(确切地说是30 to )，并将文本放在hbox中，但我在垂直对齐文本时遇到了问题
浏览 4提问于2013-08-13得票数 0
回答已采纳
5回答
我在同一行中有输入字段和复选框。我想在中间垂直对齐复选框。下面是我所拥有的例子：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
浏览 0提问于2019-08-07得票数 0
回答已采纳
1回答
我使用的是Bootstrap 4，我想使用单选和复选框按钮组，但这些按钮显示的是实际的单选和复选框UI元素，如下所示：
上面的例子直接取自文档。我试着删除并重新安装Bootstrap4，删除site.css文件和打开图标的css都无济于事。我还没有找到任何描述这个问题的链接。我使用的是Chrome版本64.0xxxx和VS 2017 MVC5。
下面是CSS和JS文件的加载顺序。
任何帮助都将不胜感激，因为我已经花了几个小时试图追踪这个问题。
浏览 21提问于2018-02-26得票数 0
使用Form Helper获得Bootstrap单选按钮结构的最简单方法是什么？所需的结构如下：
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
我尝试更改表单模板(值如'radio‘和'radioWrapper')，但没有成功。
浏览 2提问于2016-09-28得票数 0
1回答
我试图更改以下内容的布局，但没有成功，我需要的是，下拉框将与第二个(RB2)单选按钮(右侧)并行，而不是在下面。
另外，我还需要在标题下面加上行分隔符(细线)和单选按钮之前，怎么能实现呢？
对于那些想知道这是什么的人来说，这是SAPUI5
在呈现器中，您应该放置Html/Css(任何本机.)它描述控件的外观。为了使控件是垂直的，我添加了
oRm.writeAttribute('style','display:flex;flex-direction:column;align-items:flex-start');
浏览 5提问于2015-11-06得票数 2
回答已采纳
1回答
使用Bootstrap3，单选按钮文本的堆叠在移动(Xs)视图- 中是不正确的。
屏幕截图：
可以看到，文本与移动(Xs)视图中的单选按钮没有正确对齐。
浏览 5提问于2013-12-19得票数 1
回答已采纳
3回答
表格内的单选按钮
、、、、
我把一组单选按钮放在表格里，代码是这样的：
<table class="table table-responsive">
<thead>
<tr>
<th>Courier</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<form>
<tr>
浏览 0提问于2015-10-05得票数 11
回答已采纳
2回答
我有这个HTML和CSS
问题在于单选按钮被视为单独的元素，因此具有class="cellData"的固有属性。注意单选按钮垂直间距有多宽。
<div class="cellData">
<input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
<input name="ctype" value="course" type="r
浏览 0提问于2011-05-23得票数 0
回答已采纳
1回答
我正在创建一个引导网站，在其中我有一个多个复选框和单选按钮组的网页。我使用Bootstrap内置的功能来创建单选按钮组，这意味着通过使用相同的"name“属性(但不同的"value”属性)，我可以在单选按钮之间切换选择。我还将相同的"name“属性赋给我想要分组的复选框(以及不同的"value”属性来区分它们)，以便能够根据当前的选择轻松地创建Javascript和/或PHP。
我找到了一篇文章-- --据我所见，只有当复选框/单选按钮的“名称”属性的值不同于复选框/按钮和复选框/按钮时，文章上的脚本才能工作(如果我想轻松地将它们分组，这是不可能的)。为了明确
浏览 1提问于2022-01-18得票数 0
1回答
我正在使用Twitter Bootstrap创建一个针对移动设备的页面。因为它是针对移动设备的，所以我希望我所有的表单UI元素都是漂亮和大的。
对于普通的文本输入，input-lg类很好地实现了这一点。但它在单选按钮或复选框上是的，我在中看不到与之对应的类。
如何对复选框和单选按钮实现相同的结果？
浏览 1提问于2014-08-27得票数 2
我希望在Bootstrap Table中使用像这样的东西来设置单选按钮或复选框的样式。然而，我不明白如何做到这一点，因为实际对应的输入标记是由javascript代码(bootstrap-table.js)中的连接操作创建的。是否提供CSS类来设置Bootstrap表中单选按钮的样式？
浏览 0提问于2015-07-06得票数 6
回答已采纳
1回答
我正在尝试在同一行上有一个单选按钮和一个文本字段。我希望文本框采用剩余的宽度。我尝试过浮动元素等，但是单选按钮不再与文本输入垂直对齐。我该怎么办？这是我当前的HTML，其中的文本字段不会采用剩余的整个宽度。
<li>
<input type="radio"
name="answers"
value="true" />
<input type="text" />
</li>
浏览 2提问于2013-08-26得票数 0
我正在用头撞墙，试图用.form-horizontal中的单选按钮让Bootstrap变得正常。
问题是如何使单选按钮和它们的标签对齐，同时也与表单的其余部分对齐。我做过的最好的事情是：
<legend>New user</legend>
<form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post">
<div clas
浏览 2提问于2013-09-23得票数 6
1回答
以前，我使用表格来正确地对齐我的表单，但我决定采用语义的方式，并使用无序列表。然而，现在我很难对齐单选按钮，因为在安莉标签中没有垂直对齐属性来轻松地将其与左侧的标签对齐。
这是我的问题的jsFiddle：
浏览 0提问于2012-03-08得票数 1
3回答
我的页面上有一组单选按钮：
<form ...>
<input type="radio" name="people" checked> Student
<input type="radio" name="people"> Teacher
<input type="radio" name="people"> Assistant
<!-- Here is the dynamic content, which could be
浏览 9提问于2011-08-19得票数 1
3回答
显示了按钮的一些很好的用法，用于设置复选框和单选字段的样式。例如，对于复选框，我可能会这样写
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
</div>
但是，该库实际上并不改变底层<input>字段的值--它只是改变<label>字段是否具
浏览 2提问于2013-08-23得票数 21
回答已采纳
我的rails 3.1.3应用程序使用的是simple_form 2.0.1和twitter_bootstrap_rails 2.0.3。
除了使用单选集合之外，我的所有表单元素看起来都很好
= f.collection_radio_buttons :my_fieldname, [['x1', 'FOO'],
['x2', 'BAR'],
['x3', 'FOOBAR'],
['', 'None']], :first, :last
单选按钮和标签垂直显示如下：
()
浏览 1提问于2012-03-10得票数 0
回答已采纳
我试图使图标，文字和按钮坐在垂直的div中心。
因此，试图很好地使用引导类，但仍然无法工作。有人能帮我吗？
下面是要参考的图像：
Css部分：
.brl-icon-size { font-size: 2.5em; }
这是我所有的代码：
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.boot
浏览 2提问于2014-06-30得票数 0
我正在开发一个JSF应用程序，它最近要求使用BootsFaces。我是BootsFaces的新手(同时也是Bootstrap )。在查看了BootsFaces网站之后，似乎缺少了一些相当常见的组件:文本区域和无线电按钮。也许我只是错过了他们。
具体而言:在引导程序中，复选框和单选按钮都使用<input>元素呈现，分别使用“复选框”或“收音机”的类型属性。BootsFaces有一个复选框组件，但似乎既没有单选按钮组件，也没有在复选框上设置属性使其成为单选按钮。
在引导程序中，单行文本输入字段是一个类型属性为" text“的元素。多行文本输入字段是一个不同的元素，一个<t
浏览 5提问于2015-11-06得票数 0
1回答
在Flex3中以2列显示复选框
、、、、
我正在使用Flex3和一个新手。我正在使用中继器创建复选框。我不想垂直对齐所有的复选框，因为它们太多了。我想在两列中显示复选框以节省一些空间？我可以对x和y属性施展魔法。但是，有什么简单的方法可以做到这一点吗？
浏览 1提问于2012-06-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
