Ввод против пролета HTML

Question

У меня простая группа ввода и она отлично работает.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td class="form-group">
  <div class="col-xs-7 input-group">
    <span class="input-group-addon"><span><b>+49</b></span></span>
    <input name="newMobileNumber" validator="/^(\d{11})$/" maxlength="11" id="newMobileNumber" validator-invoke="watch" validator-error="fehlerhafte Mobilfunknummer-Eingabe" ng-model="vm.MobileChangeData.NewMobileNumber" class="form-control" placeholder="Neue Mobilfunknummer"
      required>
  </div>
</td>

Но мне нужен диапазон перед +49 вместо ввода.

Я попытался:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <div class="col-xs-7">
    <span class="input-group-addon"><span><b>+49</b></span></span>
    <span>3124214214125</span>
  </div>
</td>

Но все запутано.

Есть идеи?

Answer 1

потому что вы не добавили input-group в родительский div

см. Ниже обновленный код:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <div class="col-xs-7 input-group">
    <span class="input-group-addon"><span><b>+49</b></span></span>
    <span>3124214214125</span>
  </div>
</td>

Answer 2

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<td>
  <div class="col-xs-7 input-group">
    <span class="input-group-addon"><span><b>+49</b></span></span>
    <span class="form-control">3124214214125</span>
  </div>
</td>