Строки внутри ионического нижнего колонтитула не складываются должным образом

Question

У меня есть следующая разметка, которая должна приводить к тому, что входные данные сложены над строкой значков. Увы, каждый из них занимает половину ширины нижнего колонтитула. Я потратил слишком много времени, пытаясь найти виновника CSS, связанного с нижним колонтитулом, но придумал короткий.

<div class="bar bar-footer bar-balanced auto-height"> 
    <div class="row"> 
     <div class="list list-inset"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Email" /> 
      </label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col text-center"> 
      <button class="button button-icon icon ion-social-twitter"></button> 
     </div> 
     <div class="col text-center"> 
      <button class="button button-icon icon ion-social-facebook"></button> 
     </div> 
     <div class="col text-center"> 
      <button class="button button-icon icon ion-social-linkedin-outline"></button> 
     </div> 
     <div class="col text-center"> 
      <button class="button button-icon icon ion-social-googleplus"></button> 
     </div> 
    </div> 
</div> 

Demo

Я был бы заинтересован в любом затруднительном положении для того, что, как представляется, ошибка в сетке Ионные, либо переопределение решение, чтобы сделать строки ведут себя. Огромное спасибо.

Answer 1

Отдельные ДИВ на вход и кнопки DIV, а затем дать Див на вход в класс bar-subfooter вместо bar-footer и дать кнопки Див классов bar bar-footer:

<div class="bar bar-subfooter bar-balanced auto-height"> 
    <div class="row"> 
     <div class="list list-inset"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Email" /> 
      </label> 
     </div> 
    </div> 
</div> 

<div class="bar bar-footer row"> 
    <div class="col text-center"> 
     <button class="button button-icon icon ion-social-twitter"></button> 
    </div> 
    <div class="col text-center"> 
     <button class="button button-icon icon ion-social-facebook"></button> 
    </div> 
    <div class="col text-center"> 
     <button class="button button-icon icon ion-social-linkedin-outline"></button> 
    </div> 
    <div class="col text-center"> 
     <button class="button button-icon icon ion-social-googleplus"></button> 
    </div> 
</div>