загрузочные формы-группы во входных данных

Question

Мне нужна ваша помощь с бутстрапом form-group`s.

это мой HTML

<form action="#" class="form-inline" role="form"> 
    <div class="form-group no-margin"> 
     <input type="text" class="form-control no-margin" placeholder="Search..." /> 
     <select class="form-control selectcity no-margin" id="sel1"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
     </select> 
     <div class="input-group date no-margin" id="datetimepicker1"> 
      <input type="text" class="form-control col-md-3" placeholder="თარიღი" style="padding: 0 5px;" /> 
      <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
    <button class="btn btn-blue" type="submit">Search</button> 
</form> 

это выглядит как они рядный , но у них есть запас друг от друга. Я попробовал маржу: 0 в css, но он не работает , пожалуйста, помогите мне.

это изображение показывает, как она выглядит сейчас

Image 1

и на этом изображении, как мне нужно быть

Image 2

пожалуйста, помогите мне.

Answer 1

Это поведение по умолчанию инлайн/встроенный блок элементов: они уважают пробельные между ними, включая переводы строк, вкладки и т.д. Простейший исправление в вашем случае, чтобы установить font-size: 0 в .form-group контейнера, так что пробелы эффективно отображены в виде нулевая ширина:

.form-group.no-margin { 
    font-size: 0; 
} 

Это трюк не повлияет на внутренние элементы ввода, так как они имеют более конкретную font-size настройки, но промежутки между исчезнет.