Html Bootstrap 3“btn-group”在小屏幕上的无响应行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21988395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 "btn-group" non-responsive behavior on small screens
提问by Ilia Shakitko
Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
是否有引导程序 3 方法来处理“btn-group”的小屏幕尺寸？
Button group is placed in <td>and wrapped in <div class="btn-group">:
按钮组放置<td>并包裹在<div class="btn-group">：
Looks okay, until you re-size it to <768px. Then you have:
看起来不错，直到您将其重新调整为 <768px。然后你有：
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
如何让他们坚持下去？我试图添加 class btn-group-justified。但结果是它提供了全宽按钮，并且在重新调整到小屏幕尺寸时看起来更糟。
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.
PS> 我有一个想法，如何实现它添加全套自定义类。我的问题是关于 bootstrap3 的方式。可能是我错过了什么。
采纳答案by Jeen Jay
I want to offer you a version with icons from FontAwesome. With a minimum screen resolution text hide leaving only icons.
我想为您提供一个带有FontAwesome图标的版本。使用最小屏幕分辨率文本隐藏只留下图标。
Sorry for my english.
对不起我的英语不好。
<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>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Vishal Kumar更新：添加 GLYPHICONS 预览
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/
检查这个小提琴：http: //jsfiddle.net/Jeen/w33GD/4/
回答by fracz
You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xsand visible-xsto them you can hide and show vertical group on appropriate screen size.
您可以使用相同的按钮创建两个按钮组并制作其中之一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>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
不幸的是，这需要重复按钮的标记，但如果您使用任何模板工具（定义标记一次并包含两次），这应该不是问题。
Wide screen:
宽屏：
Narrow screen:
窄屏：
See the JSFiddle.
请参阅JSFiddle。
回答by Jose Castellanos
Here's an alternative to @fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
这是@fracz 答案的替代方法，您可以尝试不重复 HTML 内容。刚刚从 btn-vertical-group 和 btn-group 复制了 css 并使用了媒体查询。
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
您所要做的就是将 btn-toolbar-responsive 添加到工具栏 div 的类中。
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin: demo
为简单起见，它在 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;
}
}
}
}
回答by Kevin Nelson
Okay, so this worked in a test page I made:
好的，所以这在我制作的测试页面中有效：
<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>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
使用 col-xs-6 强制每个按钮为 50% 可以防止它包装在我自己的以您的示例为模型的测试页面中。然而，如果你有一个比示例更宽的表格并且你压缩到 320px，文本会溢出按钮，它看起来比你的坏示例更糟糕。
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
您可能已经知道这一点，并且对于您的情况可能不切实际，因此如果我只是提供无用的示例，我深表歉意。但是，如果您的表格比您作为示例发布的表格宽得多，我建议您使用 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>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
然后，只需找到一种方法来改变颜色、添加边框或显示多行行之间的分隔所需的任何内容。
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td>in my browser tests:
在我刚刚制作的 BootPly 中，正如我所说，按钮开始以非常小的尺寸重叠，但<td>在我的浏览器测试中，它们不会在 a 内环绕：
回答by Leon Matz
try to set min-widthon <td>
尝试设置最小宽度上<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>
回答by Stosh15
<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
您可以使用一些简单的 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>
回答by PrivateAgent
No, If you open page in small screen, bootstrap wrapyou buttons.
不，如果您在小屏幕中打开页面，引导程序会包裹您的按钮。
回答by VostanAzatyan
<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>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
您可以在媒体中添加类 (btn-group-xs,btn-group-sm) < 720px
hope it will help you ;)
希望它会帮助你;)
