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

如果水平调整屏幕大小，有时文本会超出按钮。

我想知道是否可以在横屏调整大小时自动更改按钮文本。诸如“+ 添加新项目”之类的东西仅适用于小型设备中的加号“+”。

我对媒体查询有点菜鸟，所以我想我遗漏了什么或做错了什么。

有人可以帮助我吗？

我为此做了这个 fiddle。

Answer 1

我做了一个 fiddle 显示和隐藏 2 个不同按钮的方法，这可能不是最好的方法，但是嘿，它有效。

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

Answer 2

您只需创建另一个媒体查询（在您认为文本应该更改的位置），然后将文本隐藏在按钮中。不要将按钮放在现在的位置，而是将其封装在 <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 来解决，因为如果您将按钮放在其他地方，则无法保证它会起作用。您应该尝试查看按钮的内容是否比按钮本身的宽度宽，然后相应地添加一个 'invisible' class

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

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

Answer 3

试试这个工作演示：JSFiddle。

在按钮文本中添加一个class，当屏幕足够小时设置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 4

您可以在不添加任何额外媒体查询的情况下完成此操作，或者 CSS 通过使用 Bootstrap:

中的内置响应实用程序

<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 5

如果你使用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>

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

Change button text automatically when screen is resized with Bootstrap 3

html

css

media-queries

twitter-bootstrap

twitter-bootstrap-3