Кнопка Bootstrap: левый значок и текст по центру

Мне нужно сгенерировать кнопку (а не группу кнопок) со следующей структурой:

слева: [глификон] центр: текст

пример: https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png

Вот что я сделал:

<div class="row btn-custom">
        <div class="btn-group btn-group-lg col-xs-12" >
          <button class="btn btn-success col-xs-1"><span class="glyphicon glyphicon-earphone"></span></button>
          <button class="btn btn-success col-xs-10">Call Us</button>
          <button class="btn btn-success col-xs-1"></button>
        </div>
      </div>

CSS:

.btn-custom {
    margin-bottom: 5px; 
}

.btn-custom button { 
    border-left:none; 
    height: 50px;
}

Проблема в том, что на очень маленьком экране они начинают складываться и не выглядят как одна кнопка. есть ли лучший способ добиться этого?

  • этот код предназначен для использования только на мобильном сайте (m. * url), поэтому, пожалуйста, не рекомендуйте мне делать что-то еще, я знаю, что делаю.

Спасибо!!!


button twitter-bootstrap twitter-bootstrap-3 glyphicons
person Nizar Blond    schedule 19.12.2013    source источник

Ответы (2)


arrow_upward
37
arrow_downward

Используйте простую кнопку с .pull-left на глифе:

<button class="btn btn-lg btn-success col-xs-12">
    <span class="glyphicon glyphicon-earphone pull-left"></span> Call Us
</button>

Загрузка

person zessx    schedule 19.12.2013

arrow_upward
0
arrow_downward

Пытаться

<button class="btn btn-success btn-large"><i class="glyphicon glyphicon-earphone"></i> Call us</button>

На вашем подходе есть три кнопки, поэтому он сложен на мобильном телефоне.

person Gokhan Demirhan    schedule 19.12.2013
comment
это не то, что я хочу. я хочу, чтобы значок был слева, а звонок нам посередине, а кнопка была на всю ширину (col-xs-12) - person Nizar Blond; 19.12.2013