时间戳

首页 > 解决方案 > 当按钮在小屏幕上重新排列时，Bootstrap 并排按钮没有间隙

html - 当按钮在小屏幕上重新排列时，Bootstrap 并排按钮没有间隙

问题描述

所以我可以并排两个按钮就好了，但是当屏幕太小时，按钮会从上到下重新排列（就像他们应该的那样），但问题是它们之间没有间隙，例如这就是我的按钮看起来像在“正常”大小的屏幕上

示例图 1

但在小型设备上看起来像这样

示例图 2

正如您所看到的，当它们在较小的设备上从上到下重新排列时，按钮之间现在没有间隙了，有没有办法解决这个问题？

这是使用的 HTML 的片段

<div style="text-align: center;">
    <a href="#" class="btn btn-info" role="button">btn example 1</a>
    <a href="#" class="btn btn-info" role="button">btn example 2</a>
</div>

标签： htmlcsstwitter-bootstrapbuttonresponsive-design

解决方案

您可以仅margin在 css 中添加，然后在您的按钮之间添加边距：

<div style="text-align: center;">
    <a href="#" class="btn btn-info" role="button">btn example 1</a>
    <a href="#" class="btn btn-info" style="margin:3px;" role="button">btn example 2</a>
</div>

plunker：http ://plnkr.co/edit/8B4Wifa8aTqVaFaZcasg?p=preview

推荐阅读