带有字形的响应按钮

Question

我正在使用bootstrap构建一个响应式网站（小型社交网络），我使用了带按钮的字形，并且它在全屏幕上工作正常，我的问题是，当浏览器宽度减小时，字形符号会超出按钮的边框图片包括：

代码是：

<div class="row">
            <div class="btn-group-vertical col-sm-2" style="width: 9% ">
                <br/><br/><br/>
                <button type="button" class ="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-up" style="vertical-align:middle;text-align: center;"></span></button>
                
                <button type="button" class="btn btn-default" style="font-size:3vw"><span class="glyphicon glyphicon-thumbs-down" style="vertical-align:middle; text-align: center"></span></button>
                <button type="button" class="btn btn-default" style="font-size:3vw"> <span class="glyphicon glyphicon-tags"></span> </button>
            </div>

所以我的问题是：如何使这个响应，无论屏幕大小如何？

Answer 1

您可以使用引导类来获得所需的输出，而不会破坏图标和按钮。只需使用输入而不是按钮，然后使用type = button。

这是一个示例代码。希望这会有所帮助。

<div class="form-group">
  <label class="control-label" for="but1"></label>
  <div class="input-group">
    <span class="input-group-addon"><i class=glyphicon glyphicon-thumbs-up"></>
    <input type="button" class="btn btn-default" id="but1" value="button" />
  </div>
</div>

这将创建带有图标的按钮，您可以使用CSS设置它们的样式。

Answer 2

按钮宽度设置为style="width: 9%"。因此，当屏幕较小时，按钮宽度将为屏幕的9%。