Bootstrap 3 "btn-group" не реагирует на небольшие экраны

Ответ 1

Я хочу предложить вам версию с иконками FontAwesome. При минимальном разрешении экрана текст оставляет только значки.

Извините за мой английский.

<div class="btn-group">
    <button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
    <button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>  

ОБНОВЛЕНИЕ Vishal Kumar: добавьте предварительный просмотр GLYPHICONS

Проверьте эту скрипту: http://jsfiddle.net/Jeen/w33GD/4/

Ответ 2

Вы можете создать две группы кнопок с теми же кнопками и сделать один из них btn-group-vertical. Затем после применения к ним hidden-xs и visible-xs вы можете скрыть и показать вертикальную группу на соответствующем размере экрана.

<div class="btn-group hidden-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>

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

Широкий экран:

Узкий экран:

Смотрите JSFiddle.

Ответ 3

Хорошо, поэтому это сработало на тестовой странице, которую я сделал:

<div class='btn-group'>
    <button class='btn btn-default col-xs-6'>View</button>
    <button class='btn btn-default col-xs-6'>Delete</button>
</div>

Принуждая каждой кнопке 50%, используя col-xs-6, она не переносится на мою собственную тестовую страницу, смоделированную после вашего примера. Однако, если у вас более широкая таблица, чем в примере, и вы сжимаете до 320 пикселей, текст переполняет кнопки, и это выглядит еще хуже, чем ваш плохой пример.

Возможно, вы уже знаете это, и это может быть непрактично для вашей ситуации, поэтому я приношу свои извинения, если я просто представляю бесполезные примеры. Однако, если ваша таблица намного шире, чем вы опубликовали в качестве примера, я бы предложил сделать ваши строки, используя сетку BS вместо таблицы. Это позволяет сделать, чтобы одна строка становилась двумя строками, когда страница сжималась, например.

<div class='row'>
    <div class='col-xs-12 col-sm-6'>Some additional details</div>
    <div class='col-xs-6 col-sm-3'>Date</div>
    <div class='col-xs-6 col-sm-3'>
        <div class='btn-group'>
            <button class='btn btn-default col-xs-6'>View</button>
            <button class='btn btn-default col-xs-6'>Delete</button>
        </div>
    </div>
</div>

тогда просто найдите способ чередования цветов, добавьте границы или все, что вам нужно, чтобы показать разделение между несколькими рядами строк.

В BootPly, который я только что сделал, как я уже сказал, кнопки начинают перекрываться с очень маленькими размерами, но они не обертываются, когда внутри <td> в моих тестах браузера:

http://www.bootply.com/117330

Ответ 4

попробуйте установить min-width на <td>

<td style="min-width: 90px">
    <div class="btn-group">
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-check"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-question"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-times"></i>
        </button>
    </div>
</td>

Ответ 5

Здесь альтернатива @fracz ответить, вы можете попробовать, что не будет дублировать HTML-контент. Просто скопировал css из btn-vertical-group и btn-group и использовал медиа-запрос.

Все, что вам нужно сделать, это добавить btn-toolbar-отзыв к классам div панели инструментов.

Это в scss для простоты, хотя вы можете легко конвертировать его в Интернете. Вот JS Bin: демонстрация

SCSS:

.btn-toolbar.btn-toolbar-responsive{
  text-align: center;
  margin: 0;
  .btn-group{
    float: none;
  }

  @media (max-width: 767px){
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
      margin-top: -1px;
      margin-left: 0;
    }


    .btn-group{
      position: relative;
      display: block;
      vertical-align: middle;
      margin: 0;
      .btn {
        display: block;
        float: none;
        max-width: 100%;

      }
      .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
      .btn:last-child:not(:first-child) {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

    }
    .btn-group:not(:first-child):not(:last-child) {
      .btn {
        border-radius: 0;
      }
    }

    .btn-group:first-child:not(:last-child) {
      .btn:last-child, .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .btn-group:last-child:not(:first-child) {
      .btn:first-child {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

}

Ответ 6

Нет. Если вы открываете страницу на маленьком экране, загрузите кнопки wrap.

Ответ 7

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

вы можете добавить класс (btn-group-xs, btn-group-sm) в медиа- 720px

надеюсь, что это вам поможет;)