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

Posted 2023-03-06

【中文标题】使用 Bootstrap 3 调整屏幕大小时自动更改按钮文本

【英文标题】：Change button text automatically when screen is resized with Bootstrap 3

【发布时间】：2015-10-29 16:41:48

【问题描述】：

考虑以下代码：

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

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

我想知道是否可以在水平屏幕调整大小时自动更改按钮文本。像“+ Add New Item”这样的东西只有在小型设备中的加号信号“+”。

我对媒体查询有点小白，所以我认为我遗漏了什么或做错了。

有人可以帮我吗？

我为它制作了这个fiddle。

【参考方案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 中，所以选择最适合你的。

【讨论】：

很好的解决方案！但就我而言，我需要额外的 CSS，因为我需要更改 sm/xs 的默认引导程序最大宽度值。

很好的答案..！

自 bootstrap 4 以来，隐藏/显示的类发生了变化。看看这个：getbootstrap.com/docs/4.0/utilities/display

【参考方案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 样式中。很难维护。

【讨论】：

你的解决方案对我来说就像一个魅力，只需要很少的代码修改。谢谢！

【参考方案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>

【参考方案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/

【讨论】：

感谢回复，我想要一个不需要jquery代码的解决方案。

【参考方案5】：

我做了一个小提琴，显示和隐藏 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;