详情页

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 添加下边框。
相关文章
猜你需要