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

可以让 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 添加下边框。