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>';
    }
}

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

我想知道在水平屏幕调整大小时是否可以自动更改按钮文本。像＆＃34; +添加新项目＆＃34;只有加号信号＆＃34; +＆＃34;在小型设备中。

我是媒体查询的小菜鸟，所以我觉得我错过了一些错误或做错了。

有人可以帮助我吗？

我为此做了fiddle。

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样式中。这很难维持。

Answer 3

如果你使用Bootstrap，那就像潜入两个类一样简单。

当屏幕宽度分别为中等或小时，

hidden-sm和hidden-xs 隐藏元素。

如此简单，您希望在屏幕较小时隐藏，只需应用这些类！

示例：

<button class="btn btn-primary">
    <span class="glyphicon glyphicon-person"></span>
    <span class="hidden-xs hidden-sm">Profile</span>
</button>

Answer 4

您只需创建另一个媒体查询（在您认为文本应该更改的位置），并隐藏按钮内的文本。不要将按钮放在现在的位置，而是将其封装在<span>中，然后在页面变得小于x像素时编写一些CSS以将display设置为none。

<强> 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><span>Add New Item</span></button>
</div>

<强> CSS

@media only screen and (max-width: <change this value>) {
    button span {
        display: none;
    }
}

但是，我认为应该使用jQuery解决这个问题，因为如果将按钮放在其他位置，则无法保证这是可行的。您应该尝试查看按钮的内容是否宽于按钮的宽度本身，然后相应地添加“隐形”类

我稍微修改了你的jsfiddle，但是，jQuery似乎在这个上有点错误（尝试打印我在函数中使用的值）

https://jsfiddle.net/ogt84jds/1/

Answer 5

我做了一个小提示，显示并隐藏了两个不同的按钮，这可能不是最好的方式，但是，嘿，它有效。

http://jsfiddle.net/xo9xkv05/

HTML

<div class="less">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button>
</div>
<div class="more">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

.less {
    display:none;
}
@media (max-width: 300px) {
    .less {
        display:block;
    }
    .more {
        display:none;
    }
}

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

5 个答案: