Заполнение или разметка загрузочного диска между элементами на одной строке

Question

Я новичок в бутстрапе, и у меня есть следующий код.

<form name="filesearch" id="filesearch" method="post" action="index.cfm"> 
     <div class="input-group col-lg-5"> 
      <span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span> 
      <input id="mfr" name="mfr" type="text" class="form-control"> 
      <span class="input-group-addon">Material Name</span> 
      <input id="mtrlname" name="mtrlname" type="text" class="form-control"> 
     </div> 
</form> 

Это не рядная форма, и я пытаюсь поставить пространство между первым входом и вторым пролетом. Таким образом, между входным идентификатором mfr и диапазоном имени материала.

Answer 1

Вы можете использовать сетку вместо использования нескольких надстроек внутри одной группы.

Поместите ваши входы внутри столбцов XS, а затем уменьшите заполнение столбцов, чтобы пространство между двумя входами не было таким большим.

См. Рабочие фрагменты.

* Sidenote: Я помещаю дополнительный пример, поскольку надстройки настолько велики, что на мобильном устройстве почти нет полезного пространства ввода, которое может иметь значение или не иметь значения.

.no-gutter >[class*='col-'] { 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="well"> 
 
    <p>XS Columns</p> 
 
</div> 
 
<form role="form" method="post" id="myForm"> 
 
    <div class="container"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-xs-6"> 
 
     <div class="input-group"> <span class="input-group-addon"> 
 
         <input type="radio" aria-label="..."> Manufacturer</span> 
 

 
      <input type="text" class="form-control" aria-label="..."> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span> 
 

 
      <input type="text" class="form-control" aria-describedby="basic-addon1"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<hr> 
 
<div class="well"> 
 
    <p>SM Columns</p> 
 
</div> 
 
<form role="form" method="post" id="myForm"> 
 
    <div class="container"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-sm-6"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon"> 
 
         <input type="radio" aria-label="..."> Manufacturer</span> 
 

 
      <input type="text" class="form-control" aria-label="..."> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span> 
 

 
      <input type="text" class="form-control" aria-describedby="basic-addon1"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
<hr>