如何在bootstrap中将水平文本与单选按钮和复选框对齐
在Bootstrap中，可以使用内联表单（Inline Form）来实现将水平文本与单选按钮和复选框对齐的效果。
内联表单是一种布局方式，它可以将表单元素水平排列在同一行。以下是实现该布局的步骤：
- 创建一个表单（form）元素，并为其添加class属性为"form-inline"，这将启用内联表单布局。
<form class="form-inline">
<!-- 表单元素 -->
</form>- 在表单中添加文本输入框、单选按钮和复选框等表单元素。
<form class="form-inline">
<label for="text-input">文本：</label>
<input type="text" class="form-control" id="text-input">
<label class="form-check-label" for="radio-input">单选按钮：</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-input" id="radio-input1" value="option1">
<label class="form-check-label" for="radio-input1">选项1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-input" id="radio-input2" value="option2">
<label class="form-check-label" for="radio-input2">选项2</label>
</div>
<label class="form-check-label" for="checkbox-input">复选框：</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox-input1" value="">
<label class="form-check-label" for="checkbox-input1">选项1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkbox-input2" value="">
<label class="form-check-label" for="checkbox-input2">选项2</label>
</div>
</form>在上述代码中，我们使用了form-inline类来启用内联表单布局。form-control类用于样式化文本输入框，form-check类用于样式化单选按钮和复选框。
- 根据需要，可以使用其他Bootstrap的样式类来进一步自定义表单的样式。
这样，就可以在Bootstrap中将水平文本与单选按钮和复选框对齐了。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云智能视频分析（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
相关·内容
使用我的测验创建器界面，用户输入三个答案，然后通过设置单选按钮标记正确的答案：
但是，我不能让文本输入和复选框很好地对齐。最好，我想这样做没有圆角之间的文本输入和复选框。就像下面的链接中显示的水平单选按钮组。而是在左侧输入文本。
。
你知道怎么做吗？
感谢:)克里斯蒂安
浏览 1提问于2012-06-15得票数 0
1回答
使用Bootstrap3，单选按钮文本的堆叠在移动(Xs)视图- 中是不正确的。
屏幕截图：
可以看到，文本与移动(Xs)视图中的单选按钮没有正确对齐。
浏览 5提问于2013-12-19得票数 1
回答已采纳
我已经使用Xamarin中的自定义渲染实现了单选按钮。默认情况下，单选按钮左对齐，文本右对齐。如何才能将单选按钮的位置更改到右侧？
Xaml代码如下
<StackLayout HorizontalOptions="Start" VerticalOptions="CenterAndExpand">
<control:BindableRadioGroup x:Name="SortPicker"
TextColor=&
浏览 0提问于2017-08-23得票数 2
3回答
演示
我做了一个自定义单选按钮，但是DOM结构使自定义复选框的中间很难对齐，我需要右边有不同行的标签，复选框是水平中心。
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label"><p>Row one</p><p&
浏览 0提问于2018-08-13得票数 0
回答已采纳
<?php
$array = array();
$array[1] = '1 Day';
$array[2] = '2 Days';
$array[3] = '3 Days';
$array[4] = '4 Days';
$array[5] = '5 Days';
$array[6] = '6 Days';
$array[7] = '7 Days';
foreach($array as $key=> $arr)
{
if($key == 7)
{
浏览 0提问于2014-01-06得票数 0
我正在尝试下面的示例，在我的android应用程序中使用单选群组/单选按钮。
但单选按钮位于标签(文本)的左侧。
您能告诉我如何配置它，使单选按钮位于标签的右侧吗？文本与父对象左对齐，而单选按钮与父对象右对齐？
谢谢。
浏览 0提问于2010-07-25得票数 3
我想在文本框旁边放置一个单选按钮，如下所示： <input type="radio" name="myRadioButton" id="firstRadioButton">
<textarea id="myTextArea"></textarea> 当文本区域变宽时，单选按钮与其底部对齐。如何使单选按钮与文本区域的顶部对齐？
浏览 36提问于2019-12-09得票数 0
回答已采纳
我正在开发一个JSF应用程序，它最近要求使用BootsFaces。我是BootsFaces的新手(同时也是Bootstrap )。在查看了BootsFaces网站之后，似乎缺少了一些相当常见的组件:文本区域和无线电按钮。也许我只是错过了他们。
具体而言:在引导程序中，复选框和单选按钮都使用<input>元素呈现，分别使用“复选框”或“收音机”的类型属性。BootsFaces有一个复选框组件，但似乎既没有单选按钮组件，也没有在复选框上设置属性使其成为单选按钮。
在引导程序中，单行文本输入字段是一个类型属性为" text“的元素。多行文本输入字段是一个不同的元素，一个<t
浏览 5提问于2015-11-06得票数 0
1回答
在WPF中，有没有一种方法可以使控件与其上方的单选按钮中的文本开头对齐，而不只是使用边距？在下面的例子中，我在第一行有一个单选按钮，在它正下方的一行有一个文本块。我希望文本块中的文本与单选按钮中的文本对齐。
浏览 3提问于2017-05-05得票数 0
我希望在Bootstrap Table中使用像这样的东西来设置单选按钮或复选框的样式。然而，我不明白如何做到这一点，因为实际对应的输入标记是由javascript代码(bootstrap-table.js)中的连接操作创建的。是否提供CSS类来设置Bootstrap表中单选按钮的样式？
浏览 0提问于2015-07-06得票数 6
回答已采纳
如何在单选按钮组(尺寸为match_parent)中水平对齐3个单选按钮(尺寸为wrap_content)
浏览 0提问于2020-04-28得票数 0
1回答
我正在使用Twitter Bootstrap创建一个针对移动设备的页面。因为它是针对移动设备的，所以我希望我所有的表单UI元素都是漂亮和大的。
对于普通的文本输入，input-lg类很好地实现了这一点。但它在单选按钮或复选框上是的，我在中看不到与之对应的类。
如何对复选框和单选按钮实现相同的结果？
浏览 1提问于2014-08-27得票数 2
一位朋友给了我一些带有自定义复选框的待办事项列表代码，我一直在努力使用Flexbox (使用bootstrap类)将自定义复选框与待办事项列表文本居中对齐，如下所示： 这是一个包含代码的代码笔：https://codepen.io/tanner-brandt/pen/vYGvRee ? 当文本占据多行时，我一直尝试将复选框项的子项居中对齐，但复选框保持在顶部。同时，我的delete按钮(文本右侧的X按钮关闭)似乎可以正确响应。有人能帮我找出问题所在吗？
浏览 24提问于2020-09-23得票数 0
回答已采纳
我想在Windows Phone 7的单选按钮内创建一个文本框，以便显示多行文本。
RadioButton rb = new RadioButton();
rb.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
rb.VerticalAlignment = System.Windows.VerticalAlignment.Center;
rb.Height = 104;
rb.Width = 396;
浏览 0提问于2012-10-22得票数 0
回答已采纳
2回答
我有一个包含几个文本框、单选按钮、复选框等的表单。现在，我分别通过声明每个值并保存到程序设置中来保存它们的值：
Properties.Settings.Default.EmailFrom = txtbxEmailFrom.Text;
我想找到一种方法循环遍历所有的对象，并在可能的情况下保存它们的设置，这样我就不必单独声明每个对象。
有办法这样做吗？还是一个更好的方法来保存我的文本框的文本，复选框的复选状态&无线电按钮等等？
浏览 4提问于2015-12-27得票数 4
回答已采纳
2回答
我一直在寻找这个问题的现有答案，但还没有找到。我目前正在做一个Rails 3项目，其中一些表单分别具有单选按钮和复选框的多项选择/多项选择问题。我使用表单生成器样式，如下所示：
<%= form_for [@profile,@answer], :method => 'put', :url => { :action => 'update' } do |f| %>
<% if @options.nil? %>
<%= @error_message %>
浏览 3提问于2012-04-02得票数 1
回答已采纳
我编写了下面的HTML来显示两个单选按钮和一些文本。
<input id="radio1" type="radio" checked="checked"/>Create the application name <br/>
<input id="radio2" type="radio"/> Create the Source name
我的问题是单选按钮和文本没有正确对齐。单选按钮显示在文本的稍下方。如何将单选按钮和文本对齐到同一行并正确对齐？
浏览 0提问于2014-04-22得票数 3
1回答
为什么显示:内联不工作？
、、、
我试图制作一个简单的网页，在其中文本字段和按钮处于水平位置，我使用了display:inline，它不工作，为什么这里是我的代码
当用户滚动输入字段和按钮时，.they应该水平地显示在图像中
请忽略红色圆圈.I需要输入和按钮字段应水平。
其次，当用户单击菜单选项("-")在右上角打开菜单选项时，滚动文本.text在菜单上，.Text应该出现在菜单下面。
var myApp = angular.module('myApp'，'ui.bootstrap'，‘离子型’)；//myApp.direction(‘myDirective’，fu
浏览 3提问于2015-07-18得票数 2
回答已采纳
我想把标题和按钮放在同一条水平线上，但放在页面的相对两侧(左和右)。我使用的是Twitter引导程序，所以我将它们放在一个.row中，然后指定它们都是.col.sm-6。我把按钮放在div中，这样我就可以用文本对齐将它移到列的右边。
我怎么能让那个按钮在手机上自动中心呢？当窗口变小，第二列跳到第一列下时，按钮仍然对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class=&
浏览 1提问于2014-11-04得票数 0
回答已采纳
我对java swing组件是个新手。请告诉我如何创建多个框架。我的要求是，基础框架应包含2个单选按钮，如果我点击任何单选按钮，它应该去其他框架，它应该显示4个复选框。
敬请指教
浏览 0提问于2010-07-16得票数 0
我有一组单选按钮和一个提交按钮。我希望将它们并排放置，单选按钮组在左侧，提交按钮按比例在右侧对齐。使用twitter bootstrap的正确方式是什么？
目前，无论我做什么，我都会获得单选按钮组下面的按钮。
浏览 3提问于2015-01-28得票数 0
无线电组总是垂直列在资料用户界面中。有没有办法使它们水平对齐？所有单选按钮都在一条水平线上。
浏览 0提问于2015-11-12得票数 50
回答已采纳
4回答
我正在尝试解决如何正确地将文本与单选按钮对齐。我在一个单选按钮组中垂直布局了许多单选按钮，每个单选按钮都有一个TextView，它们应该与单选按钮对齐。我发现的问题是，因为单选按钮在它们自己的RadioGroup布局中，所以我不能引用RadioButton，所以它与TextView对齐。有谁知道做这件事的好方法吗？
浏览 0提问于2010-11-19得票数 0
回答已采纳
3回答
假设我有一些单选按钮，它们的标签如下所示：
<label for="my_radio_button_id">My Label</label>
<input type="radio" name="radio" id="my_radio_button_id" />
如何使每个单选按钮在其相应标签下方居中并水平对齐？
浏览 0提问于2012-06-06得票数 10
回答已采纳
在Windows中，在任何windows窗体或web浏览器中，都可以使用Tab键在所有表单域之间切换焦点。
它将在文本框、单选按钮、复选框、下拉菜单等处停止。
但是，在Mac OSX中，Tab键跳过下拉菜单。有没有办法在不使用鼠标的情况下改变这种行为，或者访问上面提到的项目？
浏览 1提问于2008-08-05得票数 21
回答已采纳
我是网络前端开发的新手，虽然我有后端和嵌入式编程经验.
我正在学习前端开发使用Bootstrap。我编写了这个简单的引导代码(可用的)作为练习。
我观察到的是，当我在240 on宽显示器上查看输出时，navbar的元素垂直叠加。如何阻止navbar元素垂直堆叠，并在显示宽度减小时保持其水平对齐。如果我从select中删除navbar元素，那么navbar极右的“切换条”按钮将与极左的"navbar品牌“保持水平对齐。但如果将select元素添加到"navbar品牌“旁边，则"navbar品牌”、“select元素”和“切换条按钮”垂直堆叠。
另外，当显示大小增加到不同大
浏览 1提问于2016-07-01得票数 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
回答已采纳
当前行为从角5.2.6 => 6.0.4和primeng 5.2.4 => 6.0.0-beta.1升级。虽然复选框和单选按钮仍然呈现、选择和突出显示，但当选中时，它们无法在复选框内呈现实际复选框，或在选择单选按钮时呈现单选按钮中的点。这在Firefox 60.0.1 (64-bit)、Microsoft Edge 42.17134.1.0和Chrome 66.0.3359.181 (Official Build) (64-bit)中进行了测试。在选择过程中没有显示控制台错误(在复选框中取消选择)。
预期的行为我希望看到复选框和单选按钮的点呈现。
问题的最小再现与指令创建一个复选框
浏览 0提问于2018-06-11得票数 1
回答已采纳
2回答
我有一个带有大按钮的GUI，想要将按钮中的文本对齐到顶部，所有我发现的是“水平对齐”属性。谢谢..。
浏览 1提问于2011-11-22得票数 5
回答已采纳
我正在尝试将文本与单选按钮和复选框对齐。我使用bootstrap来设置页面布局。请添加我的标记并更正我的代码。我已经添加了代码片段以获取更多详细信息。我需要所有的单选按钮水平对齐与文本。
input[type="checkbox"], input[type="radio"] {
padding: 0;
box-sizing: border-box;
width: 30px;
height: 30px;
background-color: #edf8f7;
/* background-image: none; *
浏览 17提问于2017-07-01得票数 0
回答已采纳
我正在解析表单并获取所有元素的值，包括文本框、单选按钮、复选框、列表框和下拉框。
我目前能够获得上述所有内容的值...我所说的值是指分配给该元素的值(例如单选按钮)...但是，在某些情况下，屏幕上显示的值的文本(在单选/复选框/下拉/列表中)与实际分配给该值的文本(提交表单时)不同。
作为参考，我使用类似于下面的代码来获取列表/下拉文本框的所有“选项”-
if($(this).is('select'))
{
$(this).find('option').each(function(){
浏览 2提问于2011-11-07得票数 0
回答已采纳
当我单击cancel按钮时，我需要清除控件(文本框、复选框和单选按钮)中的输入值或选定值。
不幸的是，复选框和单选按钮选定值在取消时不会更改，btn单击和文本框值将被清除。
这些控件位于id为divUser的div中。如何清除复选框选择和单选按钮？
$("#btnCancel").click(function () {
$('input, select,input:radio', $('#divUser')).val('');
});
浏览 0提问于2013-04-24得票数 0
回答已采纳
当一些复选框/单选按钮被选中时，我想显示一些隐藏的文本/元素(无论什么)(假设有一个复选框/单选按钮列表可供选择)。
我应该怎么做才能满足WCAG 2.0 AA标准？
以及AT用户究竟是如何理解单选按钮/复选框的，因为显然这不是复选框/单选按钮的假设行为。
谢谢!
浏览 1提问于2017-03-02得票数 0
我正在尝试发送带有单选按钮文本的单选按钮值到php。
我可以发送单选按钮值，我想发送文本后的单选按钮，而不改变复选框信息，但我不能发送文本到php。
<input name="list" type="checkbox" value="15.00" />Shirt
<input name="list" type="checkbox" value="19.00" />Trousers
<input name="list" type="checkbox
浏览 0提问于2021-04-13得票数 1
我上面的单选按钮包装了标签，但它没有正确对齐。它应该在顶部第一个文本的正下方对齐。是否需要设置配置才能使标签正确换行。
浏览 0提问于2013-04-17得票数 1
回答已采纳
2回答
我对bootstrap3中的水平格式有问题。
只要标签文本不是太长，标签按钮的对齐就可以了.只要复选框后面有一些文本，标签复选框的对齐就会很好。
工作实例：
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<d
浏览 4提问于2015-12-10得票数 1
回答已采纳
0回答
我有一个使用Bootstrap 3的网页。在这个网页中，我显示了一些单选按钮。我的单选按钮是样式化的，所以我在其中添加了一个元素。尽管如此，这些单选按钮的标签还是相当长。此时，它们的渲染方式如下：
• This is my label. It can be rather long and
wrap to the next line. There could be four or
even more lines.
但是，我希望它们像这样呈现：
• This is my label. It can be rather long and
wrap to the next line. There
浏览 0提问于2016-12-22得票数 1
回答已采纳
1回答
我试图定位我的膨胀头，并希望在右边的扩展按钮与一个复选框和文字在左边。目前，我有以下几点：
<Expander Margin="5" IsExpanded="False" FlowDirection="RightToLeft">
<Expander.Header>
<StackPanel Orientation="Horizontal" >
<CheckBox IsChecked="{Binding Selected}" ></Check
浏览 1提问于2017-11-02得票数 0
回答已采纳
我有一个带有单选按钮和复选框的表单。我有一个文本区，在提交之前，我必须显示该文本区中选定的单选和复选框值。你能在那个concern.How中帮我在jquery中做到这一点吗？
浏览 0提问于2012-04-02得票数 0
回答已采纳
这是我的
我可以验证前3个文本输入，但是当我的验证到达复选框和单选按钮时，它只验证一个复选框和一个单选按钮，而不是循环返回并重新检查每个框/按钮。
因此，如果我只输入第一个单选按钮和第一个复选框，它就允许提交。此外，如果我输入一个复选框并点击submit，没有弹出窗口要求我填写其他复选框，我的单选按钮也有同样的问题，如果我输入其中一个单选按钮，它只会提示我填写复选框，而忽略其他单选按钮。
我需要在我的循环计数器中更改什么？感谢您的帮助，谢谢！
浏览 4提问于2012-10-17得票数 0
回答已采纳
4回答
我有一堆单选按钮，我还有一个
<br/>
在每一个之后，它们看起来都水平居中对齐(即使我放了一些CSS，上面写着左对齐)。
这是CSS，
.radioLeft
{
text-align:left;
}
下面是HTML：
<input checked="checked" class="radioLeft" name="CalendarType" value="1" type="radio"><b>Person </b>(False) <br>
浏览 0提问于2010-12-16得票数 5
回答已采纳
1回答
<div style="left: 300px; position:absolute">
<label>Radio button Text:<input type="radio" name="lf-title" value="val"></label>
</div>
代码片段显示了我的单选按钮的当前位置及其相关文本。我想将单选按钮设置到父div的左侧开始位置，并偶尔将单选按钮文本移动到单选按钮的右(左对齐)或左(右对齐)。(如图所示)
在两种情况下
浏览 1提问于2018-03-13得票数 0
我正在创建一个基于设计师，photoshop模拟的网站。
这是一个问句的一部分。我知道这可以很容易地用HTML表创建，但是由于表应该用于数据，我宁愿使用CSS。
我正在试图找出是否可以用三个单独的列来创建它，一个是单选按钮，另一个是标题，另一个是文本框，但我不知道如何让这些功能对齐(“帐户”复选框与"Name“及其文本框对齐)。
这应该用CSS还是表格来完成？
浏览 3提问于2013-12-27得票数 3
回答已采纳
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
回答已采纳
我想从我的用户获得更多的信息，当他们注册。对于标准的profile.module，我有以下选项：
单行文本框
多行文本框
复选框
列表选择
自由表
URL
日期
但我希望单选按钮从多个选项中选择1个选项。这可以通过列表选择来完成，但是我更喜欢单选按钮。
有人能帮我吗？
浏览 0提问于2011-04-05得票数 1
回答已采纳
3回答
引导vue单选按钮
、、、
我希望1)确保单选按钮与左对齐，2)减少标签和单选按钮文本之间的垂直空间以及每个文本之间的垂直空间。
在下面的示例中，您可以看到单选按钮文本是居中的，并且在它们之间有大约一半的文本高度空间，我想减少它们之间的距离。
浏览 14提问于2022-08-24得票数 0
回答已采纳
我有一些文本(p元素)和两个按钮在它旁边。然而，这两个按钮看上去并不像文本(p元素)那样水平对齐。按钮似乎略低于课文。
如何使它们看起来像在水平水平上一样？
代码片段：
body {
background-color: rgb(44, 63, 83);
}
#timer {
margin-top: 1%;
}
#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
co
浏览 8提问于2021-03-10得票数 2
回答已采纳
3回答
我的html页面，我有一个复选框和两个按钮水平对齐。它们是通过PHP函数动态填充的。我发现将复选框对齐与按钮大小完全相同，并且很难与按钮保持一致。
以下是一个最小的例子：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesh
浏览 0提问于2019-02-24得票数 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
回答已采纳
9回答
我最初用HTML、CSS和JavaScript创建了一个web应用，然后又被要求在Bootstrap中重新创建它。我已经做得很好了，但是我不得不在web应用程序中切换按钮，这些按钮已经变成了单选按钮(最初是复选框)，而不是我原来的切换按钮。
按钮的代码为：
<label>
Notifications
<span class='toggle'>
<input type='radio'
class='notifications'
name='notifications
浏览 5提问于2012-11-22得票数 96
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
