html - 无法使用 bootstrap 对齐输入字段

我不知道如何将左框调整为占位符的宽度。

大致大小明智，我希望它看起来像这样：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<div class="container">
  <label for="phonNum"> Please enter phone Number</label>
  <div class="row text-left">
    <div class="form-group form-inline" show-errors>
      <div class="col-xs-6">
        <input type="text" class="form-control" maxlength=3 name="phoneInt" placeholder="000" ng-model="client.phoneIn">
      </div>
      <div class="col"></div>
      <input type="text" class="form-control" maxlength=10 name="phone" placeholder="670125" ng-model="client.phone">
    </div>
  </div>

</div>

最佳答案

就是这个：

   <div class="container">
        <label for="phonNum"> Please enter phone Number</label>
        <div class="row text-left">
            <div class="form-group form-inline" show-errors>
                <div class="col-xs-6">
                    <input type="text" class="form-control" maxlength=3 name="phoneInt" size="3" placeholder="000"
                        ng-model="client.phoneIn">
                </div>
                <div class="col">
                    <input type="text" class="form-control" maxlength=10 name="phone" placeholder="1234567891"
                        ng-model="client.phone">
                </div>
            </div>
        </div>

检查https://jsfiddle.net/sugandhnikhil/ba5jhosn/1/

关于html - 无法使用 bootstrap 对齐输入字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59160239/