twitter-bootstrap 使用 Bootstrap 3 调整屏幕大小时自动更改按钮文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31857353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change button text automatically when screen is resized with Bootstrap 3
提问by Lord_Dracon
Consider this codes:
考虑这个代码：
HTML
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
CSS
@media only screen and (max-width: 767px) {
button {
content: '<i class="fa fa-plus"></i>';
}
}
If you resize the screen horizontally, at some moment the text will get out of the button.
如果您水平调整屏幕大小，在某些时候文本将离开按钮。
I want to know if is possible to change the button text automatically when the horizontal screen resizes. Something like "+ Add New Item" to only the plus signal "+" in small devices.
我想知道是否可以在水平屏幕调整大小时自动更改按钮文本。像“+ 添加新项目”这样的东西，只有小设备中的加号“+”。
I'm a little noob with media queries, so I think I'm missing something or doing it wrong.
我对媒体查询有点菜鸟，所以我想我遗漏了什么或做错了。
Can someone help me?
有人能帮我吗？
I made this fiddlefor it.
我为它做了这个小提琴。
采纳答案by Joy
Try this working demo: JSFiddle.
试试这个工作演示：JSFiddle。
Add a class to the button text, set display:nonewhen the screen size is small enough:
在按钮文本中添加一个类，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>
And CSS:
和 CSS：
@media screen and (max-width: 300px) {
.button-text {
display: none;
}
}
Suggestion: never put DOM structure or information inside CSS styles. It is hard to maintain.
建议：永远不要将 DOM 结构或信息放在 CSS 样式中。很难维护。
回答by Blackpool Towr
You could do this without adding any additional media queries or CSS by using the built in responsive utilities within Bootstrap:
通过使用 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>
It adds a bit more HTML markup, but the extra data is either going in the HTML, or in the CSS, so whichever works best for you.
它添加了更多的 HTML 标记，但额外的数据要么在 HTML 中，要么在 CSS 中，所以哪个最适合你。
回答by OverCoder
If you use Bootstrap, then it's as simple as sneaking in two classes.
如果你使用 Bootstrap，那么就像偷偷进入两个类一样简单。
hidden-smand hidden-xshidethe element when the screen width is medium or small, respectively.
hidden-sm并分别在屏幕宽度为中或小时hidden-xs隐藏元素。
So simply, you want to be hidden when the screen is small, just apply those classes!
很简单，你想在屏幕很小的时候隐藏，只需应用那些类！
Example:
例子：
<button class="btn btn-primary">
<span class="glyphicon glyphicon-person"></span>
<span class="hidden-xs hidden-sm">Profile</span>
</button>
回答by Ruben Rutten
You just create another media query (at the point where you think the text should change), and hide the text within the button. Instead of placing the button where it is now, encapsulate it in a <span>, then write some CSS to set displayto noneonce the page is becoming smaller than x pixels.
您只需创建另一个媒体查询（在您认为文本应该更改的地方），然后将文本隐藏在按钮内。取而代之的将按钮的地方，现在是，将其封装在一个的<span>，然后写一些CSS来设置display到none一旦页面正变得比x像素较小。
HTML
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
CSS
@media only screen and (max-width: <change this value>) {
button span {
display: none;
}
}
However, I think this should be resolved with jQuery since there is no way to guarantee that this is going to work if you place the button at other places. You should try to see if the content of the button is wider than the button's width itself, then add a 'invisible' class accordingly
但是，我认为这应该用 jQuery 解决，因为如果您将按钮放在其他位置，则无法保证这会起作用。您应该尝试查看按钮的内容是否比按钮本身的宽度宽，然后相应地添加一个 'invisible' 类
I modified your jsfiddle a bit, however, jQuery seems to be a bit buggy on this one (try printing the values I'm using in the function)
我稍微修改了你的 jsfiddle，但是，jQuery 在这个上似乎有点问题（尝试打印我在函数中使用的值）
回答by Kilowog
I made a fiddle showing and hiding 2 different buttons that is maybe not the best way, but hey, it works.
我做了一个小提琴显示和隐藏 2 个不同的按钮，这可能不是最好的方法，但是，嘿，它有效。
HTML
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
CSS
.less {
display:none;
}
@media (max-width: 300px) {
.less {
display:block;
}
.more {
display:none;
}
}
