Bootstrap水平表单

基础概念

Bootstrap 是一个流行的前端开发框架，它提供了一系列的 CSS 和 JavaScript 组件，用于快速构建响应式和移动优先的网页。水平表单（Horizontal Form）是 Bootstrap 中的一种表单布局方式，它通过使用 Bootstrap 的网格系统（Grid System）和预定义的 CSS 类，使得表单元素在页面上水平排列，从而提高表单的可读性和美观性。

类型

Bootstrap 水平表单主要通过以下 CSS 类来实现：

form-horizontal：应用于表单元素，使其水平排列。
control-label：应用于标签元素，使其与对应的输入框对齐。
form-control：应用于输入框、选择框等表单控件，使其具有 Bootstrap 的默认样式。

应用场景

水平表单适用于需要展示大量表单字段的场景，例如用户注册、登录、配置设置等页面。通过水平排列，可以更清晰地展示每个字段及其对应的标签，提高用户体验。

示例代码

以下是一个简单的 Bootstrap 水平表单示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Horizontal Form</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

参考链接

Bootstrap 官方文档 - 水平表单

常见问题及解决方法

标签与输入框不对齐：
- 确保使用了 control-label 类和 form-control 类。
- 检查网格系统的列数是否一致，例如 col-sm-2 和 col-sm-10。

响应式布局问题：
- 确保引入了 Bootstrap 的响应式 CSS 文件。
- 使用 col-* 类来定义不同屏幕尺寸下的列宽。
JavaScript 错误：
- 确保引入了 jQuery 和 Popper.js，因为 Bootstrap 的 JavaScript 插件依赖于它们。
- 检查控制台中的错误信息，根据提示进行调试。

通过以上方法，可以有效解决 Bootstrap 水平表单中常见的问题，确保表单在不同设备上都能正常显示和使用。

页面内容是否对你有帮助？

有帮助

没帮助

Bootstrap水平表单

、、

我尝试在bootstrap中创建一个水平表单，并使用了他们在文档中给出的代码。在示例中，他们给出的输入框填充了整个列空间。由于某种原因，即使我复制了代码，这种情况也不会发生。如何使我的格式相同？

浏览 34提问于2021-02-28得票数 1

回答已采纳

1回答

水平表单- Twitter Bootstrap

、、

我试着获得一个像示例中那样的水平形式。但由于某些原因，我不能得到水平布局。我的网站<form class="form-horizontal"> <label class="control-label

浏览 1提问于2015-05-22得票数 0

0回答

我有一个关于bootstrap form-horizontal的问题，问题是我有一个包含两个" form -group col-sm-6“组的水平表单。我需要删除该空间，以便两个表单组填充该空间。我使用的代码是：<!- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/<em

浏览 1提问于2017-11-28得票数 2

回答已采纳

1回答

Twitter Bootstrap水平表单

、

我正在尝试使用Bootstrap创建一个表单，其中字段是水平的，但标签在字段上方。fieldset class="span6"> </fieldset>这将生成一个如下所示的表单但我想要的是看起来像我需要什么Twitter Bootstrap魔法来完成这项工作？

浏览 2提问于2013-05-29得票数 5

回答已采纳

1回答

带有ASP.Net单表单限制的引导窗体样式

、、

我的网站使用ASP.Net Web，这限制了您只有一个带有runat="server"的表单，因此我已经将所有内容包装在一个表单标记中。现在，我正在使用Bootstrap 3，并希望使用对一些表单进行单独的样式设计。似乎要使用Bootstrap水平表单样式，我必须重新考虑如何在网站上使用表单，或者我必须在任何地方使用水平表单，这两者都不是理想的。因此，现在看来，我将不得不模仿自定义样式的水

浏览 2提问于2014-05-29得票数 3

回答已采纳

1回答

twitter bootstrap表单水平排列字段-播放框架

、、

我正在尝试使用twitter bootstrap框架构建一个form in play框架。我想要在多行中排列控件。我还想要bootstrap提供的验证消息。有没有办法做到这一点？

浏览 0提问于2013-03-23得票数 1

1回答

如何用变形2制作水平形状？

、、、、

我使用和Bootstrap 3来呈现某些表单，我想创建一个水平表单，如所示，但是上的所有示例都不是水平表单的示例(在输入元素旁边有标签)。我试过使用form_class="form-horizontal"和bootstrap_form_style="form-horizontal"()。如何将其余的类名添加到窗体的其余部分，使其成为水平窗体(如上的那样)

浏览 6提问于2014-05-30得票数 1

回答已采纳

1回答

何时将control-group与Twitter bootstrap一起使用

我已经在互联网上搜索过了，但是在twitter-bootstrap中找不到在什么情况下我想使用"control-group“类的定义…… 有人能告诉我什么时候需要使用这个类吗？

浏览 2提问于2014-12-14得票数 1

2回答

如何使用Twitter Bootstrap设置Cakephp

、

我发现在Cakephp中使用Twitter Bootstrap和设置cake.generic.css有一些问题使用Cakephp设置Twitter Bootstrap的最佳实践是什么？

浏览 1提问于2013-12-03得票数 4

3回答

Bootstrap水平表单不工作

、、

我正在尝试使用bootstrap为我的laravel应用程序构建一个简单的水平表单。这就是我使用的代码。但它是这样显示的：表单显示在页面的左半部分。有什么想法吗？最好是表单在页面上居中。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap</e

浏览 0提问于2017-09-23得票数 4

1回答

使用bootstrap的水平表单

大家好，我正在尝试使用twitters bootstrap实现一个水平表单，但由于某些原因，标签一直显示为块级项目，而不是漂浮在文本框旁边。我的代码如下，任何人都可以帮助。-- Latest compiled and minified CSS --> <link rel=

浏览 0提问于2014-05-21得票数 0

2回答

Bootstrap中心水平表单

、

我试图通过设置text-align:center;和display:block-inline;，在英雄单位中居中放置一个水平形状但这并不是很有效，因为复选框和提交按钮不再正确对齐

浏览 5提问于2013-02-26得票数 2

3回答

Bootstrap :垂直表单中的水平字段

、

我想有一些“水平样式”内的Bootstrap“垂直样式”的形式字段。我如何才能做到这一点(如果可能)？

浏览 2提问于2012-12-05得票数 3

回答已采纳

2回答

横排排版中出现换行的一种区别

、、、、

我必须创建一个包含很多标签和表单的表单，比如文本区域，单选etc.but当我应用bootzstrap水平表单方法时，它给出了标签和文本区域之间的一行差异这是我的代码<html> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/boots

浏览 2提问于2013-06-19得票数 1

1回答

如何将Bootstrap3集成到Symfony3中？

、、

许多答案都是的，因为它们大多是关于Symfony 2.x和bootstrap3的。

浏览 3提问于2017-01-11得票数 0

1回答

引导3-两列布局-去掉占位符

、、、、

我正在尝试使用类似于的引导程序3创建一个表单。我可以让它看起来非常相似，但我唯一的问题是，我在ETO部分的最后一个水平规则贯穿了整个过程。有什么办法能让这篇文章只传半页吗？

浏览 0提问于2017-05-31得票数 0

回答已采纳

1回答

intellisense列表中没有窗体水平项

、、

我使用的是vs 2016 ...我下载了bootstrap 4.1.3，并在项目中添加了两个文件夹css和js。我在我的项目中添加了一个html页面，并将bootstrap.css链接到此页面的标题。问题是，当我想要在HTML页面的正文中添加一个表单标签(带有form-horizontal类)时，在Intellisense项的列表中没有表单-水平项。大多数引导项都存在于列表中，但表单水平和“表单输入行”都不在列表中。我的表单也不是<e

浏览 0提问于2018-07-31得票数 0

1回答

易碎的Django表单

、、、

我在Django中使用的是Crispy form，但现在我喜欢在表单中改变文本和样式，该怎么办呢？ 

浏览 6提问于2020-05-06得票数 0

回答已采纳

1回答

如何使用自定义窗体样式

我们如何对表单使用不同的样式？例如，如何使用水平窗体(如Bootstrap )：

浏览 0提问于2018-08-20得票数 1

1回答

Twitter Bootstrap* 3-嵌套表单-水平响应式设计问题*

、

我有许多Twitter Bootstrap 3表单-水平样式的表单，它们嵌套在不同页面的列中。通常，当有足够的空间让标签和输入并排出现时，它们就会这样做，否则标签就会出现在输入的上方。但是，当表单没有太多宽度可用时，假设表单在使用Bootstrap 12列网格系统的3/ 12宽的外部列中，我看到标签被截断并在输入下消失，而不是看到标签在输入上移动。您可以在这里看到一个简化的示例，它使用了Twitter Bootstrap3文档中的表单

浏览 0提问于2014-01-09得票数 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Bootstrap水平表单

基础概念

相关优势

类型

应用场景

示例代码

参考链接

常见问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐