Как сделать ввод полной ширины своего контейнера?

Question

У меня есть поле внутри bootstrap вход и ссылка внутри. Но ниже, как вы можете видеть, ввод не на всю ширину. Как я могу сделать его полным?

Вы видите, что между вводом и связью есть зазор. Я хочу сделать этот зазор вместо ширины ввода.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
} 

       
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div> 

Answer 1

Просто используйте встроенный класс bootstrap для группы ввода формы input-group.

.resetToDef{
  display: block;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:57px;
 border:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef input-group">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>

Answer 2

.resetToDef - display:flex; и input - flex:1;

это будет работать для вас.

.resetToDef {
  display: flex;
  width: 25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}

.resetToDef a {
  font-size: 12px;
  color: #FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input {
 flex:1;
  border: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="resetToDef">
  <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
  <a href="" class="float-right btn"> Back to default</a>
</div>

Answer 3

Для этого можно использовать flex и flex grow.

.resetToDef {
    display: flex;
}

.resetToDef input {
    flex-grow: 1;
}

Для этого нужно установить родительский элемент в гибкий контейнер, чтобы прямые потомки могли использовать свойства flex.

Теперь мы установили для ввода значение 'flex-grow: 1;', которое будет указывать вводу "расти" (занять, сколько свободного места осталось) и иметь полную доступную ширину.

Не забудьте, что ваши элементы имеют отступы, которые могут показаться, что элементы не занимают всю доступную ширину.

Answer 4

Удаляет ширину, заданную для элемента ввода, и заставляет дисплей resetToDef изгибаться.

.resetToDef{
  display: flex;
  width:25.8%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
  justify-content: space-between;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 
 border:none;
} 

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div> 

Answer 5

Может быть что-то вроде этого:

.resetToDef{
  display: block;
  width:100%;
  min-width: 178px;
  border-radius: 4px;
  border: 1px solid #FF7921;
}


 .resetToDef a{
  font-size:12px;
  color:#FF7921;
  border: none;
  text-decoration-line: underline
}

.resetToDef input{
 display:inline-block;
 width:80%;
 border:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

       <div class="resetToDef">
                    <input type="number" class="form-control" placeholder="30" id="times-perform" name="times-perform">
                    <a href="" class="float-right btn"> Back to default</a>
                  </div>