Унифицированные текстовые поля CSS/Bootstrap only

Question

Я надеялся, что кто-то сможет мне помочь. Я пытаюсь создать этот пример:

Это (три) текстовые поля. Пример:

Я попытался положить текстовое поле в стороне в DIV и делает его ширина довольно низкий и выравнивание второй текстовое поле рядом с ним. Я установил границу: ни один, а затем пограничную-право: сплошной черный 1px но на начальной загрузки я в конечном итоге с чем-то вроде этого:

Answer 1

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

Iv использовал следующий HTML:

<div class="addressMain"> 
    <div class="addressBorder"> 
     <div class="addressUnified"> 
      <input type="text" placeholder="No." class="small" ></input> 
      <input type="text" placeholder="Address Details..." class="med"></input> 
      <br> 
      <input type="text" placeholder="" class="big"></input> 
      <br> 
      <input type="text" placeholder="" class="big"></input> 
     </div> 
    </div> 

и следующий CSS:

.addressUnified .med{ 
    width: 80%; 
    border: none; 
    border-left: solid grey 1px; 
    padding-left: 15px; 
    outline: none 
} 

.addressUnified .big{ 
    width: 100%; 
    border:none; 
    padding-top: 5px; 
    padding-left: 10px; 
    outline: none 
} 

.addressUnified .small{ 
    width:10%; 
    border:none; 
    padding-left: 10px; 
    padding-top: 10px; 
    outline: none 
} 

.addressUnified{ 
    width: 100%; 
    height:100px; 
    border: solid grey 1px; 
} 

Результаты были точно так, как я хотел в оригинальный вопрос. Спасибо, Джон за вашу помощь!

примечание, переоценить любой бутстрап css используя! Важное.