html - 无法将输入字段与 Bootstrap 对齐

Question

我不知道如何将左侧框的大小调整到其占位符的宽度。

大致尺寸我希望它看起来像这样:

.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>

Answer 1

就是这样:

   <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/