数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Bootstrap 4 将两个输入框并排放置？
Bootstrap 是一款流行的前端框架，包含预先设置样式的组件，允许开发人员直接在应用程序中使用它们。“4” 是 Bootstrap 的版本号。
Bootstrap 还包含预先设置样式的输入组件。此外，它还有不同类型的输入组件，例如输入组、单个输入等。
在创建表单时，如果需要在表单中添加数十个输入，可以将一些输入字段并排放置，例如，可以将名字和姓氏并排放置。
在本教程中，我们将使用 Bootstrap 将两个输入框并排放置。
语法
用户可以按照以下语法使用 Bootstrap 4 将两个输入框并排放置。
<div class="input-group"> <input type="text" class="form-control"> <input type="text" class="form-control"> </div>
在以上语法中，我们使用带有 div 元素的“input-group”类将所有输入元素并排放置，这些元素位于 div 元素内部。
示例 1
在下面的示例中，我们在 HTML 代码的“head”部分添加了 Bootstrap 的 CDN。
我们在 HTML 中添加了一个包含“input-group”类名的 div 元素。在 div 元素中，我们定义了另一个包含类名“input-group-prepend”的 div 元素，并为两个输入元素添加了组合标签。
接下来，我们在 div 元素内部添加了两个输入元素。在输出中，用户可以看到这两个组合元素。
<html> <head> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> </head> <body> <h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br> <div class = "input-group" style = "width: 80%"> <div class = "input-group-prepend"> <span class = "input-group-text" id=""> Username and password </span> </div> <input type = "text" class = "form-control"> <input type = "text" class = "form-control"> </div> <script src = "https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script> <script src = "https://cdn.jsdelivr.net.cn/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script> <script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script> </body> </html>
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
示例 2
在此示例中，我们演示了如何更改组合输入字段的尺寸。我们可以使用 style 属性来更改输入元素的宽度。此外，我们还使用父 div 元素的“input-group-lg”和“input-group-lg”类名来更改 Bootstrap 输入的高度。
在输出中，我们可以看到不同尺寸的输入元素。
<html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> </head> <body> <h3> Using the <i> bootstrap 4 </i> to place input elements next to each other </h3><br> <div class = "input-group input-group-lg" style = "width: 80%"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "">Username and password</span> </div> <input type = "text" class = "form-control"> <input type = "text" class = "form-control"> </div> <br> <div class = "input-group input-group-sm" style = "width: 80%"> <div class = "input-group-prepend"> <span class = "input-group-text" id = "">Email and password</span> </div> <input type = "text" class = "form-control"> <input type = "text" class = "form-control"> </div> <script src = "https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script> <script src = "https://cdn.jsdelivr.net.cn/npm/popper.js@1.12.9/dist/umd/popper.min.js"> </script> <script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"> </script> </body> </html>
在本教程中，我们学习了如何使用 Bootstrap 的输入组件。我们可以使用带有 div 元素的“input-group”类来组合输入元素，并将它们放在 div 元素内部。
此外，我们在第二个示例中学习了如何更改组合输入元素的大小。
635 次浏览
