开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用两个输入组和一个按钮使Bootstrap col md-4和form-group居中，使这三个保持内联

要实现将Bootstrap col-md-4和form-group居中，并使它们保持内联，可以使用以下步骤：

创建一个包含两个输入组和一个按钮的HTML表单。

<form>
  <div class="form-group">
    <label for="input1">Input 1</label>
    <input type="text" class="form-control" id="input1">
  </div>
  <div class="form-group">
    <label for="input2">Input 2</label>
    <input type="text" class="form-control" id="input2">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

使用Bootstrap的栅格系统将col-md-4和form-group包装在一个div容器中，并添加相应的类名。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div class="form-group">
        <label for="input1">Input 1</label>
        <input type="text" class="form-control" id="input1">
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="input2">Input 2</label>
        <input type="text" class="form-control" id="input2">
      </div>
    </div>
    <div class="col-md-4">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

在上述代码中，使用了容器（container）和行（row）来包装列（col-md-4）和表单组（form-group）。通过添加justify-content-center类名，使行中的内容居中对齐。

最后，将以上代码放入一个HTML文件中，并引入Bootstrap的CSS和JavaScript文件。

<!DOCTYPE html>
<html>
<head>
  <title>Centered Bootstrap Form</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 上述代码 -->
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这样，两个输入组和一个按钮就会在页面中居中显示，并保持内联。

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

有帮助

没帮助

相关·内容

BootStrap应用开发学习入门

（1）.container类出现内边距和外边距，.container-fluid类没有它是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。。...例如要创建三个相等的列，则使用三个 .col-xs-4 满足 1行十二列; 网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应；媒体查询有两个部分，先是一个设备规范，然后是一个大小规则...输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....input-group-btn #按钮插件把按钮作为输入框组的前缀或者后缀元素 #输入组大小 input-group-lg #改变输入框组的大小。...-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> 链接按钮

17.4K2 0

BootStrap应用开发学习入门

（1）.container类出现内边距和外边距，.container-fluid类没有它是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。。...例如要创建三个相等的列，则使用三个 .col-xs-4 满足 1行十二列; 网页媒体查询是非常别致的”有条件的 CSS 规则”,常常用做于网页自适应；媒体查询有两个部分，先是一个设备规范，然后是一个大小规则...输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....input-group-btn #按钮插件把按钮作为输入框组的前缀或者后缀元素 #输入组大小 input-group-lg #改变输入框组的大小。...-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --> 链接按钮

14.5K3 0

Jump Start Bootstrap 第3章

在本节中，我们将重点讨论如何使用Bootstrap推荐创建可重用的HTML组件标记和类。让我们从页眉开始。...在这代码中，我们放置了一个包含”navbar-toggle”的按钮，它被Bootstrap用来激活导航条的功能切换;它应该包含两个data-*类型的属性：data-toggle和data-target；...这里有一些按钮可以用的帮助类： btn-block：按钮跨域整行所有的网格 active：按钮显示成被点击的状态 disabled：按钮不可用，并显示成褪色状态；你要小心使用这个类，因为它将防止在输入和按钮元素上单击动作... 对于每个标签和输入字段，我们需要一个包含类”form-group”的元素。...内嵌表单和前一个表单之间唯一的主要区别是类的名称。我们已经用表单内联来替换类表单，以使表单元素内联。在前面的代码中，我们还将整个表单内容包装在一个well组件内，使它看起来更好。

13.8K2 0

【Java 进阶篇】Bootstrap 快速入门

Bootstrap 是一个流行的开源前端框架，它使网页开发更加容易和高效。...Bootstrap 提供了各种现成的样式和组件，可用于创建导航栏、按钮、表格、表单、模态框等等，使开发者能够快速搭建各种网页元素。为什么要使用 Bootstrap？...以下是一个简单的示例，如何使用 Bootstrap 的网格系统来创建一个两列布局： <div...Bootstrap 的表格样式使表格更易于阅读和导航。表单 Bootstrap 也提供了各种表单组件，如文本框、单选按钮、复选框等。...="submit" class="btn btn-primary">提交这个表单包括文本框、电子邮件输入、文本区域和提交按钮，使用 Bootstrap 的表单组件。

1801 0

Bootstrap 表单

Bootstrap 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。...把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。...在使用内联表单时，您需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。水平表单水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。...下面的实例演示了这两种类型（默认和内联）：实例默认的复选框和单选按钮的实例选项 2 - 选择它将会取消选择选项 1 内联的复选框和单选按钮的实例

1.9K2 0

一步一步学习Bootstrap系列--表单布局

Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。...把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。...这种表单不用给form（本文先用DIV代替）添加任何class通过.from-control设置width为100%所以一个控件占满了一行三、内联表单代码如下： <...这种表单的布局是内联样式就是所有控件都在同一行，在项目开发过程中一半用于快速查询的环境下，如果想改变控件的长度也是容易做到的，当前样式控件width为auto可以用style控制或者在form-group...要点使用bootstrap对前端页面的布局，container、row、col-xs-4等css样式的使用，使网页的布局更漂亮，值得一提的而是在使用container容器时，给内容一个15

2.2K10 0

【原创】bootstrap框架的学习第八课 -

把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。...在使用内联表单时，您需要在表单控件上设置一个宽度。使用 class .sr-only，您可以隐藏内联表单的标签。效果图： ?...把标签和控件放在一个带有 class .form-group 的中。向标签添加 class .control-label。...optionsRadios2" value="option2"> 选项 2 - 选择它将会取消选择选项 1 内联的复选框和单选按钮的实例... 表单控件大小您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

1.3K2 0

Bootstrap学习文档（二）

--文本输入框--> <textarea class="form-control...<em>按钮</em>的尺寸 btn-lg btn-md btn-sm btn-xs btn-block 让<em>按钮</em>从<em>内联</em>块级元素变为块级元素，可以撑满整个父级元素，也即是把<em>按钮</em>的宽度置为100%； <em>按钮</em>的状态 active...，<em>Bootstrap</em> 的命名是很有规律的，对于不同的<em>使用</em>场景，<em>使用</em>不同的前缀。...<em>Bootstrap</em> 提供了常用的三角符号<em>和</em><em>按钮</em>图标，<em>使用</em>起来很方便。...class="col-lg-2 invisible">第4列第5列 6.居中显示 center-block 是一个块级元素居中

2.3K5 0

python测试开发django -142.Bootstrap 表单(form）

前言 HTML 表单用于收集不同类型的用户输入。...在输入框外面定义一个div标签，class属性设置.form-group 、和元素设置 .form-control 类，将被默认设置宽度属性为 width...将 label 元素绑定 input 输入框 <div class="<em>form-group</em>...水平排列表单 form-horizontal 通过为表单添加 .form-horizontal 类，并联合<em>使用</em> <em>Bootstrap</em> 预置的栅格类，可以将 label 标签<em>和</em>控件<em>组</em>水平并排布局。...<em>form-group</em> 大小设置 <em>form-group</em> 可以设置3种大小样式 <em>form-group</em> 默认大小<em>输入</em>框 form-group-lg 大号<em>输入</em>框 form-group-sm 小号<em>输入</em>框在

7215 0

Bootstrap快速入门

Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。...CSS基本回顾优先级：（过去有一些误区）如何确定CSS的优先级，需要引入一个机制，分别用数字(a,b,c,d)表示优先组合，a表示style属性（行内样式），优先级最高，但由于一般使用class样式，...例如，设置按钮组，除第一个、最后一个按钮和带dropdown-toggle样式的元素外，其他btn样式都不设置圆角 .btn-group > .btn:not(:first-child):not(:last-child...使用行在水平方向上创建一组列具体内容放在列中，只有列可以作为行的直接子元素接下来看一下.container样式的源码，可以看出其核心就是.container和@media的设置 .container...表单：在form.less文件中设置，比较简单，基础的如，<input class='form-control' placeholder='请<em>输入</em>Emal

4.1K6 1

Bootstrap实战 - 注册和登录

一、介绍注册和登录在社交和商业网站中是必不可少的一个部分。...首先用一个样式 form-group 的元素包住和元素获得良好的排列。效果图： [827778385.jpg] 2.3.3 输入框组有时为了满足需求要把元素与元素组合在一起。...转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：https://blog.mazey.net/2594.html （完）

9870 0

前端基础：Boostrap

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。...-- 注意：这两个按钮的 class 样式是 Bootstrap 定义的 --> 学习充电...="passowd" class="form-control" placeholder="请输入密码"> ... 表单控件输入框输入框用法的关键核心外围容器使用 class="dropdown" 包裹内部点击按钮事件绑定 data-toggle="dropdown" 菜单元素使用 class="dropdown-menu

7.4K1 0

BootStrap

bootstrap写一个简单的登陆页面： <!...组件（就是一些搭配起来的效果，也涉及到一些动作相关的，所以需要引入js文件了）字体图标(fontawesome里面比较全) 下拉菜单按钮组输入框俎导航分页标签和徽章页头缩率图进度条...　　作业：来实现这么一个页面　　　　就在bootstrap官网的全局css样式里面的右边这个地方找你需要使用的功能。...同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。什么是响应式？　　　　利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。...如何连接上数据库　　然后就可以在pycharm上看到这个库和里面的表了　　还可以在里面写sql语句　　我们设计三张表，书籍、作者、出版社，方便之后django的学习：

5.5K3 0

【BootStrap】栅格系统、表单样式与按钮样式-附有源码

Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的网页布局中。...##实例：从堆叠到水平排列使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列...为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。...反馈图标只处理带这个class的input 图标、label 和输入控件组对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组...对于输入框组，请根据你的实际情况调整 right 值。

1.3K1 0

黑马程序员----基于BootStrap框架的网页制作综合案例

/css/bootstrap.min.css" rel="stylesheet"> //密码和确认密码的一致性校验 function checkPwAndRPw(f1,f2) { if(f1&&f2) { //密码和确认密码不为空...--将所有内容包裹到一个容器中--> ---- 效果演示:

4842 0

Bootstrap学习笔记上（带源码）

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。...来显示单行内联代码：<code> 　　②、使用来显示多行块代码　　③、使用来显示用户输入代码... 菜单、按钮小提示：1.90以上版本的jquery才可以和bootstrap.js配合使用下拉菜单 <button...2、除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果 3、第一个按钮只留左上角和左下角是圆角 4、最后一个按钮只留右上角和右下角是圆角对应的源码如下： .btn-group...（等分按钮） “btn-group-justified”类名特别声明：在制作等分按钮组时，请尽量使用标签元素来制作按钮，因为使用标签元素时，使用display:table在部分浏览器下支持并不友好

3.7K2 0

bootstrap 表单 2 input

for="name">默认的复选框和单选按钮的实例选项...optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1 内联的复选框和单选按钮的实例... 禁止输入蓝色边框输入框棕色边框输入框红色边框输入框输入错误 <div

8053 0

bootstrap快速入门笔记（七）-表格,表单

将 label元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。　　....form-group也可以； 2，内联表单：元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。...只适用于视口（viewport）至少在 768px 宽度时　　a,可能需要手动设置宽度: 　　　　在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。...b,一定要添加 label 标签: 3,水平排列的表单.form-horizontal 类:联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。...2），输入控件组：如需在文本输入域前面或后面添加文本内容或按钮控件，请参考输入控件组。　　3），文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。

2.9K3 0

简易登录页面实现

表单处理和提交登录页面包含了三个不同的登录选项，每个选项都有一个表单用于输入用户名和密码，并提交登录请求： <!...表单中包含了输入用户名和密码的文本框或密码框，并设置了required属性表示必填项。最后，通过一个提交按钮实现表单的提交。代码展示所有代码如下：标签，显示为"Login"，居中对齐。在.tab类的中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。...每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框，以及一个"Login"按钮。文本框和密码框都有一个required属性，表示必填项。...在博客中，你可以进一步扩展这些知识点，并提供更多的示例和解释，使读者能够深入了解和应用这些技术。同时，你还可以讨论如何改进该登录页面，添加验证和错误处理等功能，提高用户体验和安全性。

1733 0

简易登录页面实现

表单处理和提交登录页面包含了三个不同的登录选项，每个选项都有一个表单用于输入用户名和密码，并提交登录请求： <!...表单中包含了输入用户名和密码的文本框或密码框，并设置了required属性表示必填项。最后，通过一个提交按钮实现表单的提交。代码展示所有代码如下：标签，显示为"Login"，居中对齐。在.tab类的中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。...每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框，以及一个"Login"按钮。文本框和密码框都有一个required属性，表示必填项。...在博客中，你可以进一步扩展这些知识点，并提供更多的示例和解释，使读者能够深入了解和应用这些技术。同时，你还可以讨论如何改进该登录页面，添加验证和错误处理等功能，提高用户体验和安全性。

2022 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭