Как я могу устранить усадку кнопки?

Question

Я ищу правильный способ отображения кнопок вокруг поля ввода в одной строке и избегать (если возможно) использования атрибута «ширина». Я хочу, чтобы кнопки и поля выстраиваются в фиксированной ширины и положения даже в качестве значения (что пользователь выбирает из выпадающего списка) изменить

  <div class="row" style="margin-top: 30px;">    
          <div class="col-md-3"></div> 
          <div class="col-md-6">        
           <form class="form-inline"> 
             <div class="form-group" style="padding-left: 40px;"> 

               <div class="dropdown"> 
                <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                    <i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span> 
                </button> 
                   <ul class="dropdown-menu columns"> 
                    <li><a href="#"><strong>United States</strong></a></li> 
                    <li><a href="#">France</a></li> 
                    <li><a href="#">United Kingdom</a></li> 
                   </ul> 
               </div>   
              </div> 
              <div class="form-group"> 
              <div class="dropdown"> 
               <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                   USD <span class="caret"></span> 
                   </button> 
                   <ul class="dropdown-menu columns"> 
                    <li><a href="#"><strong>USD</strong></a></li> 
                    <li><a href="#">EUR</a></li> 
                   </ul> 
               </div> 
              </div> 
              <div class="form-group"> 
              <label for="amountnum"> </label> 
              <input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10"> 
              </div> 
              <div class="form-group"> 
              <div class="dropdown"> 
               <button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                   1 month <span class="caret"></span> 
                   </button> 
                   <ul class="dropdown-menu columns"> 
                    <li><a href="#">1 Weeks</a></li> 
                    <li><a href="#">2 Weeks</a></li> 
                    <li><a href="#"><strong>1 month</strong></a></li> 
                   </ul> 
               </div> 
              </div> 
           </form> 
          </div>     
          <div class="col-md-3"></div> 
      </div> 
</div>  

jsfiddle: https://jsfiddle.net/drorm/k43kyfpw/

, когда откроется экран, сделайте левая панель уже, чтобы увидеть кнопки выстраиваться (вместо того, чтобы падать опустившись на отдельные строки)

Предложения приветствуются

Answer 1

Добавьте следующий стиль CSS

.navbar-form,.form-inline { 
    display: flex; 
} 

Использование flex (или inline-flex) является довольно мощным. Объедините с css flex свойство на элементах, чтобы контролировать рост и сокращение элементов управления.

Google "CSS flex" для получения дополнительной информации. https://css-tricks.com/snippets/css/a-guide-to-flexbox/