Bootstrap 3“btn-group”在小屏幕上的无响应行为
Posted
技术标签:
【中文标题】Bootstrap 3“btn-group”在小屏幕上的无响应行为【英文标题】:Bootstrap 3 "btn-group" non-responsive behavior on small screens 【发布时间】:2014-03-26 03:40:22 【问题描述】:是否有 bootstrap 3 方法来处理“btn-group”的小屏幕尺寸?
按钮组放置在<td>
中并包裹在<div class="btn-group">
中:
看起来不错,直到您将其重新调整为
如何让他们坚持下去?我尝试添加类btn-group-justified
。但结果是它提供了全宽按钮,并且在重新调整为小屏幕尺寸时看起来更糟。
P.S> 我有一个想法,如何添加全套自定义类来实现它。我的问题是关于 bootstrap3 方式。可能是我错过了什么。
【问题讨论】:
找到解决方案了吗?我不明白为什么 Bootstrap 不能原生处理这个...... 【参考方案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。
【讨论】:
这行得通,我在生产中使用了类似的东西,但我们必须面对一个事实:这在很多方面都是错误的。你增加了 html 的大小,导致重复的内容(显示与否在底层无关紧要),迷惑爬虫,当你随着时间的推移添加太多按钮时,你必须自定义 css 类,总体而言,按钮越多看起来就越糟糕。跨度> 可靠的方法,但我建议将自定义类添加到 btn 组。然后从 btn-group-vertical 和标准 btn-group 复制 css,并使用 css 媒体查询在两者之间切换,而不是重复 html。【参考方案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/
【讨论】:
如果你不想使用 font-awesome,你也可以使用引导图标。在那里,您将使用 glyphicon glyphicon-eye-open 来代替 fa fa-eye【参考方案3】:这是@fracz 的答案的替代方法,您可以尝试它不会重复 HTML 内容。只需从 btn-vertical-group 和 btn-group 复制 css 并使用媒体查询。
您所要做的就是将 btn-toolbar-responsive 添加到工具栏 div 的类中。
为了简单起见,它在 scss 中,尽管您可以轻松地在线转换它。这是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;
【讨论】:
【参考方案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%,以防止它包含在我自己的以您的示例为模型的测试页面中。但是,如果您的表格比示例更宽,并且您将其压缩到 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
【讨论】:
感谢您的研究。但在那种情况下,它也不起作用:( [clip2net.com/s/6U4Ijy] [clip2net.com/s/6U4HF2] @IliaShakitko 我为你添加了一个引导链接。 好吧......直到你有太多按钮占用太多宽度【参考方案5】:尝试在<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>
【讨论】:
【参考方案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>
【讨论】:
【参考方案7】:这对我有帮助。它不会使按钮垂直,但也不会压缩它们
<div class="btn-group flex-wrap" data-toggle="buttons">
【讨论】:
【参考方案8】:不,如果您在小屏幕中打开页面,请引导 wrap 您的按钮。
【讨论】:
这不是一个正确的答案。至少,因为将btn-block
添加到 div 会使它们持久化。但它已经是按钮块(分开),没有相互连接。【参考方案9】:
<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>
可以在
希望对你有所帮助;)
【讨论】:
该死,我不能减去答案。你读过文档吗?引入这些类以使按钮组具有不同的大小。建议之前有试过吗?来自文档:Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.
那么您只能使用字体大小...您的按钮大小与您的字体大小相关
我与按钮大小没有任何关系。问题标题是:Bootstrap 3 "btn-group" 在小屏幕上的无响应行为。尝试用 3 个按钮构建简单的btn-group
。并将窗口重新调整为非常小,您将看到按钮发生了什么。但是,在那之后,请不要建议我在 css 中添加white-space:nowrap;
,因为我征求意见,如何在不带来新样式的情况下赢得这个。只有 bt3。
你可以这样做 ...
您是否真的尝试过您在上一条评论中所说的内容?这只会使按钮具有 btn-group-xs 样式。他们应该实现的是类似 btn-group-lg-xs 的东西,当屏幕为“xs”时,使按钮具有“lg”大小以上是关于Bootstrap 3“btn-group”在小屏幕上的无响应行为的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap v4实现大屏中AB两列左右相反,小屏A上B下的效果 - 解决float-md-right等在row下无效的问题