首页 > 文章资讯 > 站长教程 > 建站知识 > bootstrap 如何让label和input都在一行？

bootstrap 如何让label和input都在一行？

时间：2023年10月23日

来源：网络

编辑：佚名

可以让 label 和 input 使用同一行，可以通过将 label 和 input 包裹在同一行中来实现。可以使用 CSS 样式对 label 和 input 进行布局，使得它们在同一行中排列。
以下是一个示例 HTML 代码片段，其中 label 和 input 位于同一行中:
<div class="form-group">
<label for="phone" class="form-label">手机号:</label>
<input type="tel" class="form-control" placeholder="请输入手机号" id="phone" name="phone"
pattern="^1[3|4|5|6|7|8|9][0-9]{9}$" required>
</div>
在上面的代码中，我们使用了一个div元素来包裹 label 和 input，然后使用 CSS 样式对它们进行布局。可以通过以下 CSS 样式来使它们在同一行中排列:
.form-group {
display: flex;
flex-direction: column;
}
.form-label {
margin-bottom: 10px;
}
.form-control {
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
}
在上面的 CSS 样式中，我们使用了display: flex属性来将 label 和 input 包裹在一个 flex 容器中，并使用flex-direction: column属性来将容器垂直排列。我们还为 label 和 input 添加了一些样式，以使其更易于识别和可读性。
当使用 flex 容器时，可以使用margin-bottom属性为 label 添加下边框，使用padding属性为 input 添加内边距，并使用border-bottom属性为 input 添加下边框。

新闻资讯更多

猜你需要