在小屏幕上Bootstrap 3“btn-group”无响应行为

Question

对于“btn-group”，是否有一种处理小屏幕尺寸的bootstrap 3方式？

按钮组位于<td>并包含在<div class="btn-group">中：

看起来没问题，直到你将其重新调整为＆lt; 768px。然后你有：

如何使它们持久？我尝试添加课程btn-group-justified。但它给出了全宽按钮，在重新调整大小到小屏幕尺寸时看起来更糟。

P.S＆GT;我有一个想法，如何实现它添加完整的自定义类。我的问题是关于bootstrap3方式。可能是我错过了什么。

Answer 1

您可以使用相同的按钮创建两个按钮组，并使其中一个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>

不幸的是，这个要求重复了按钮的标记，但是如果你使用任何模板工具（定义标记一次并包含两次），这应该不是问题。

宽屏：

缩小屏幕

请参阅the JSFiddle。

Answer 2

我想为您提供一个包含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/

Answer 3

这是@ fracz的答案的替代品，您可以尝试不会复制HTML内容。刚刚从btn-vertical-group和btn-group复制了css并使用了媒体查询。

您所要做的就是添加btn-toolbar-responsive-toolbar to toolbar div。

虽然您可以轻松地在线转换，但它简单易用。这是JS Bin： demo

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;
      }
    }
  }

}

Answer 4

好的，所以这在我做的测试页面中有效：

<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>

使用col-xs-6强制每个按钮为50％，这使得它无法包裹在我的示例之后的模拟测试页面中。但是，如果你有一个比示例更宽的表，并且你压缩到320px，文本将溢出按钮，它看起来比你的坏例子更糟糕。

您可能已经知道这一点，但对您的情况可能不太实际，所以如果我只是提出无用的例子，我会道歉。但是，如果您的表格比您发布的示例宽得多，我建议您使用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

Answer 5

尝试在<td>

上设置 min-width

<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>

Answer 6

<div id="secondNav" class="btn-group" role="group">
    <button class='btn btn-default'>View</button>
    <button class='btn btn-default'>Delete</button>
</div>

您可以使用一些简单的jQuery

来完成此任务

<script>
$(window).resize(function() {
    justifyBtnGroup('secondNav');
});

function justifyBtnGroup(id) {
    var btnGroup = $('#' + id);
    if($(window).width() > 768) {
        btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
    } else {
        btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
    }
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>

Answer 7

不，如果您在小屏幕中打开页面，请按包裹按钮。

Answer 8

<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）＆lt; 720像素

希望它能帮到你;）