2 кнопки загрузки в 1 строке на мобильном телефоне

Как сделать две кнопки в одной строке с помощью бутстрапа на мобильном дисплее? Я использую этот код, но в мобильном режиме он отображает 2 строки.2 кнопки загрузки в 1 строке на мобильном телефоне

<div class="row" style="margin-top:50px"> 
     <div class="col-md-12 col-centered"> 
      <div class="col-md-3"></div> 
      <div class="col-md-3 text-center"> 
       <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
       <h3>Ajukan Izin</h3> 
      </div> 
      <div class="col-md-3 text-center"> 
       <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
       <h3>Ajukan Cuti</h3> 
      </div> 
      <div class="col-md-3"></div> 
     </div> 
    </div>

источник

2016-03-31 Muhammad Rauuf

Вы должны добавить к кнопке DIVS классы: col-xs-3 Aswell настроить его на мобильном устройстве. На планшете видит свою col-sm-3

Проверить это Fiddle

Для полной ссылки на точки останова в проверке начальной загрузки: Bootstrap Grid

источник

2016-03-31 08:26:38 Roman

Вы должны использовать класс Col-SM- * для того, чтобы предназначаться для небольших устройств

Edit:

<div class="row" style="margin-top:50px"> 
    <div class="col-md-12 col-sm-12 col-centered"> 
     <div class="col-md-3 hidden-sm"></div> 
     <div class="col-md-3 col-sm-6 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Izin</h3> 
     </div> 
     <div class="col-md-3 col-sm-6 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Cuti</h3> 
     </div> 
     <div class="col-md-3 hidden-sm"></div> 
    </div> 
</div>

источник

2016-03-31 08:20:11 wlalele

Вы хотите поделиться своим кодом? я изменил его на sm, но он все тот же. –

Я добавил пример, я не пробовал его кстати. – wlalele

он все еще не работал. но спасибо за ваше участие :) –

Я редактировал wlalele Отвечу немного. Необходимые здесь изменения включают добавление дополнительного класса (col-xs-3) для небольших экранов мобильных устройств.

<div class="row" style="margin-top:50px"> 
    <div class="col-md-12 col-sm-12 col-centered"> 
     <div class="col-md-3 hidden-sm col-xs-3"></div> 
     <div class="col-md-3 col-sm-6 col-xs-3 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Izin</h3> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-3 text-center"> 
      <a href="#" class="btn btn-default btn-circle"><i class="fa fa-file-text-o"></i></a><br/> 
      <h3>Ajukan Cuti</h3> 
     </div> 
     <div class="col-md-3 hidden-sm col-xs-3"></div> 
    </div> 
</div>

источник

2016-03-31 08:45:33 Prajwal

2 кнопки загрузки в 1 строке на мобильном телефоне

ответ

Смежные вопросы