Question

对于使用Bootstrap的按钮，我有以下代码：

<button type="button" class="btn btn-primary btn-sm">

     <span class="glyphicon glyphicon-search"></span> Search Supplies

</button>

我想在调整大小时将搜索耗材内容更改为搜索以供移动用户使用。我如何使用jQuery和Bootstrap实现这一目标？

Here's a jsbin of what I have so far

Answer 1

不需要jQuery：

只需将您的单词包含在hidden-xs类

的范围内

  <button type="button" class="btn btn-primary btn-sm">

    <span class="glyphicon glyphicon-search"></span> Search <span class="hidden-xs">Supplies</span>

  </button>

Answer 2

我认为Put12co22mer2的解决方案可以正常工作。但是，如果要设置“耗材”部分丢失的特定屏幕大小，请使用以下CSS：

<强> CSS

@media (max-width:/* Your specific width here */) {

    #supplies {

        display:none;

    }       

}

这个HTML：

<强> HTML

<button type="button" class="btn btn-primary btn-sm">

 <span class="glyphicon glyphicon-search"></span>    
 Search <span id="supplies">Supplies</span>

</button>

如何在Bootstrap中制作响应按钮？

2 个答案: