使用Bootstrap 3调整屏幕大小时自动更改按钮文本

Question

考虑以下代码:

HTML

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

@media only screen and (max-width: 767px) {
    button {
        content: '<i class="fa fa-plus"></i>';
    }
}

如果您水平调整屏幕大小,某些时候文本将退出按钮.

我想知道当水平屏幕调整大小时是否可以自动更改按钮文本.类似于"+添加新项"的东西只有小型设备中的加号"+".

我是一个有媒体查询的小菜鸟,所以我觉得我错过了什么或做错了.

有人能帮我吗？

我为它做了这个小提琴.

Answer 1

您可以通过使用Bootstrap中内置的响应实用程序而不添加任何其他媒体查询或CSS来执行此操作:

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button>
</div>

它增加了一些HTML标记,但是额外的数据要么在HTML中,要么在CSS中,所以最适合你的.

Answer 2

试试这个工作演示:JSFiddle.

在按钮文本中添加一个类,display:none当屏幕尺寸足够小时设置:

<button type="button" class="btn btn-default btn-md btn-block">
    <i class="fa fa-plus"></i>
    <span class="button-text">Add New Item</span>
</button>

和CSS:

@media screen and (max-width: 300px) {
    .button-text {
        display: none;
    }
}

建议:永远不要将DOM结构或信息放在CSS样式中.这很难维持.