Начальная ширина набора в комбинированных полях ввода без использования системы сетки

Question

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group w-100">
  <span class="input-group-text w-20">Create</span>
  <input type="number" class="form-control" placeholder="Number of items" value =1/>
  <select class="form-control w-10" id="searchAssemblyType">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Both</option>
  </select>
  <input  class=" form-control w-70" type="text" id="partNumberInput" aria-describedby="enter Number" autocomplete="off" placeholder="Search Items .." >
</div>

Я пытался присвоить w-100 внешнему <div> и назначил w-что-то внутренним элементам, но, похоже, это не работает. Есть ли способ назначить ширину этим входам, не прибегая к сложным сеткам?

Answer 1

Я бы предложил вам использовать Bootstrap Grid System для организации вашего макета, но если вы все еще хотите использовать свое решение, используя width относительно родителя. Вы можете проверить width & height документы классов утилит .

По сути, вы использовали неправильную утилиту классы . Для width, Bootstrap предлагает пять из них w-100. w-75, w-50, w-25 & w-auto. Поэтому вы должны изменить свой код на этот фрагмент:

<div class="input-group w-100">
  <span class="input-group-text w-25">Create</span>
  <input type="number" class="form-control" placeholder="Number of items" value =1/>
  <select class="form-control w-25" id="searchAssemblyType">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Both</option>
  </select>
  <input  class=" form-control w-75" type="text" id="partNumberInput" aria-describedby="enter Number" autocomplete="off" placeholder="Search Items .." >
</div>

Проверьте этот пример рабочего кода .

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