Bootstrap 4如何将标签和输入字段放在水平位置
Bootstrap 4提供了多种方法将标签和输入字段放在水平位置。以下是几种常用的方法：
- 使用水平表单（Horizontal Form）：水平表单可以将标签和输入字段放在同一行，并且标签和输入字段之间会有对齐的效果。可以通过在form元素上添加class="form-horizontal"来创建水平表单。示例代码如下：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">标签</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="输入字段">
</div>
</div>
</form>- 使用网格系统（Grid System）：Bootstrap的网格系统可以将页面划分为12列，通过使用col--类来控制元素在不同屏幕大小下的布局。可以将标签和输入字段放在同一行的不同列中，从而实现水平位置。示例代码如下：
<div class="row">
<div class="col-sm-2">
<label>标签</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="输入字段">
</div>
</div>- 使用内联表单（Inline Form）：内联表单可以将标签和输入字段放在同一行，并且没有额外的间距。可以通过在form元素上添加class="form-inline"来创建内联表单。示例代码如下：
<form class="form-inline">
<label>标签</label>
<input type="text" class="form-control" placeholder="输入字段">
</form>这些方法可以根据具体的需求选择使用。在实际应用中，可以根据页面布局和设计要求选择最合适的方法来放置标签和输入字段。
腾讯云相关产品和产品介绍链接地址：
相关·内容
2回答
Bootstrap 4如何将标签和输入字段放在水平位置
html、angular、bootstrap-4
我正在Bootstrap 4中设计一个表单，我需要满足以下几个要求：
1)屏幕应分为两部分。(ID和年龄是一部分，姓名和学院是一部分。)2)标签和输入域在大屏幕时应为水平，当屏幕变为中屏时应为垂直。(现在我只能让它在中等屏幕上保持垂直，但不能让它在大屏幕上变成水平。)(我用的是class="row"，但它确实起作用了。)
浏览 8提问于2020-03-10得票数 1
回答已采纳
2回答
在表单中使用Bootstrap排列输入文本字段
twitter-bootstrap
我想把一些“标签+文本框”分组放在水平和垂直排列的混合中。Bootstrap具有form-horizontal类，但这会将标签放在右侧而不是顶部。Last Name[________________________________]
也就是说，前两个字段(First Name和Last Name)的文本框在同一行上，但其标签在顶部，而
浏览 3提问于2013-02-20得票数 1
回答已采纳
1回答
如何在BootStrap中设置第一个输入字段的焦点？
javascript、html、twitter-bootstrap
可能重复：
如何将焦点放在输入的第一个字段上？是否有用于设置焦点的BootStrap类？
浏览 1提问于2013-01-17得票数 7
回答已采纳
2回答
Django-crispy forms:为单个字段和输入设置css
django、bootstrap-4、django-crispy-forms
是否有一种方法可以为一个单独的字段指定css并在django脆脆表单中输入？我正在使用bootstrap4，并希望对表单中的几个字段使用水平表单。我知道您可以使用self.helper设置label.class和field.class，但我认为这适用于所有字段。我只想在我的几个字段上更改标签和字段类。编辑：
我需要将css添加到与输入不同的标签中
浏览 6提问于2019-09-20得票数 1
回答已采纳
2回答
简单的引导控件水平对齐
twitter-bootstrap
我想要一个标签/输入/按钮组合，向右推，全部排在我桌子上方的。我要做的是而不是想要做的是把标签、按钮和输入字段放在各自的位置上，因为这会造成丑陋的不均匀的差距。以下是我的简单提示：
<form class="
浏览 4提问于2017-02-13得票数 0
2回答
如何保持水平放置的输入字段始终对齐？
html、css、twitter-bootstrap
表单的要求之一是，每当表单包含错误时，错误消息必须出现在标签和输入字段之间。当没有错误时，应该只有一个标签和一个输入字段。见下图：问题是，每当错误消息弹出时，输入字段就会向下推开，并且同一行中的输入字段不再对齐。我需要从另一个输入字段水平对齐。换句话说，它应该看起来像下面的图片(忽略愚蠢的水印)：这些是我
浏览 1提问于2015-08-25得票数 4
回答已采纳
1回答
如何用变形2制作水平形状？
python、css、forms、twitter-bootstrap、deform
我使用和Bootstrap 3来呈现某些表单，我想创建一个水平表单，如所示，但是上的所有示例都不是水平表单的示例(在输入元素旁边有标签)。我试过使用form_class="form-horizontal"和bootstrap_form_style="form-horizontal"()。如何将其余的类名添加到窗体的其余部分，使其成为水平窗体(如上的那样)
浏览 6提问于2014-05-30得票数 1
回答已采纳
2回答
无法将提交按钮放入bootstrap 4.3.1的输入中
html、css、bootstrap-4
我工作的bootstrap 4.3.1，我试图把提交按钮内输入，并尝试下面的方法和更多的表单堆栈溢出。 因为我的输入是rounded-pill，所以我需要把按钮放在输入字段中。如何将按钮放置在输入字段内 @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css
浏览 5提问于2019-04-30得票数 2
回答已采纳
2回答
如何使用引导flex垂直对齐和水平拉伸多个输入？
html、css、bootstrap-4、flexbox
作为一个学习练习，我只想使用 (或)垂直左对齐和水平拉伸输入字段。我知道引导网格(和)，但我不想使用它。下面是代码(也在上)<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css我还尝试将类直接放在输入</e
浏览 0提问于2019-05-22得票数 0
回答已采纳
1回答
Angular Formly -模板-在自己的类中包装标签
angular-formly
我正在使用Twitter Bootstrap进行演示。该设计要求标签和输入字段在桌面上在同一行上，在移动上堆叠。为了实现这一点，我想使用TB的网格系统，但我找不到这样做的方法。通过查看文档，我可以看到如何将类应用于标签/输入对的包装器div，而不是分别应用于标签和输入字段。
浏览 3提问于2015-09-19得票数 0
2回答
在sonata管理中对齐标签和输入
css、symfony、templates、twig
默认情况下，symfony2中的标签和输入字段不是水平对齐的，我如何才能通过以下方式实现该设计：我需要输入左边的标签位置
浏览 0提问于2016-04-11得票数 0
2回答
Django crispy表单内联标签和输入字段
python、html、django、forms、django-crispy-forms
我有一个Django ModelForm包含3个字段:姓名，姓氏，电子邮件。我想要的是调整易碎的表单，使每个字段和它的标签在一行中，这样表单看起来就像这样： Name: <input name>Email: <inputemail>
<button Submit> 我尝试使用FormHelper、布局和引导内联属性，但我所实现的是将表单中的所有元素都放在一行中。
浏览 21提问于2021-04-15得票数 1
1回答
引导表单组和jquery标记管理器:位置标签在输入框下面？
jquery、twitter-bootstrap
我用的是Bootstrap和。相对于输入字段，是否有任何方法可以控制标记的填充位置？例如，使用下面的标记位于文本框的上方。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs//3.3.6/
浏览 4提问于2016-06-25得票数 0
回答已采纳
4回答
Bootstrap 3表单使用输入组附加包装错误标签和Jquery验证
jquery、jquery-validate、twitter-bootstrap-3
将Bootstrap 3与表单水平结合使用，将表单分组和输入组标记与Jquery-Validate结合使用。当Jquery.Validate运行错误时，它会在输入组中附加一个标签错误控件。问题是，当Jquery Validate添加标签错误控件时，input-group-addon会换行到表单字段下面的下一行。
是的，我知道这个解决方案-效果很好，但仍然没有对齐form-horizontal：的错误标签
浏览 54提问于2014-02-18得票数 25
1回答
为什么显示:内联不工作？
javascript、jquery、twitter-bootstrap、css
我试图制作一个简单的网页，在其中文本字段和按钮处于水平位置，我使用了display:inline，它不工作，为什么这里是我的代码
请忽略红色圆圈.I需要输入和按钮字段应水平。var myApp = angular.module('myApp'，'ui.bootstrap
浏览 3提问于2015-07-18得票数 2
回答已采纳
7回答
如何左对齐这些Bootstrap表单项目？
html、css、forms、twitter-bootstrap
我是第一次使用Bootstrap，并且在将这个表单水平向左对齐时遇到了很多问题。下面是我的HTML。如果你在这个页面的“水平表单”下看，你会看到标签是左对齐的，但不是绝对左对齐的，所以标签</e
浏览 2提问于2013-01-11得票数 45
1回答
我想要创建一个水平的形式，标签在每个输入前面，并能够控制到每个输入的宽度。phpuse yii\helpers\ArrayHelper;;</div>
这是在create和update视图中调用的_form视图。我不太明白为什么标签对齐不一致，因为我为整个字段指定
浏览 0提问于2018-04-26得票数 0
回答已采纳
1回答
Bootstrap 3:表单标签位置取决于主列
css、forms、twitter-bootstrap、label、size
我在bootstrap中设计了一个模块，我想让我的标签在表单中的位置取决于主列的宽度。使用col-sm-*、col-md-*等，位置(作为大小的结果)取决于屏幕宽度，而不是母版宽度。form-control input-md" value=""></div></div>
在所有大小的屏幕上都表现得很好，但是如果我将这个部分包括在一个框中，它没有足够的空间来放置标签，因此它不会将<e
浏览 0提问于2016-12-14得票数 0
3回答
如何在Bootstrap类中包装ASP.net验证控件？
asp.net、twitter-bootstrap、validation
我正在使用Bootstrap3和ASP.NET webforms，我对Bootstrap完全陌生。我正在开发的webform使用ASP.net验证控件。我的web表单有一个标准的两栏布局，我使用" form - group“类来分组我的标签和输入域。现在的问题是，当我将标签、输入字段以及它的验证器放在Bootstrap的"form-group“类中时，验证器的text属性中的消息
浏览 17提问于2016-09-07得票数 4
回答已采纳
1回答
用于文本和图片编辑的UI字段
django、bootstrap-4
我有一个标题，内容和图像字段的CreateView。我想要允许用户将图片放在他们喜欢的内容字段中。我想在我的网站上添加一个这样的字段：我不需要这么详细的东西，但目前图片位置是我放置img html标签的位置。我希望它是由用户选择，因为他正在写一篇文章。如果有人能帮我弄清楚如何使用bootstrap和django来实现这一点。thx
浏览 0提问于2019-05-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
