文本/图像响应设计

Question

我应该使用twitter-bootstrap构建一个响应式设计，其中导航中的按钮具有图像（图标）和文本（如果有足够的空间）但如果没有，则应该只有图像。像这样：

大屏幕：

<image1> text1; <image2> text2; <image3> text3

小屏幕：

<image1>; <image2>; <image3>

我怎么能这样做？ 谢谢！

Answer 1

Twitter Bootstrap中有一些类可以帮助您完成所需的操作。

.visible-phone  
.visible-tablet 
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

例如，如果您希望图标中的文字必须仅在平板电脑或桌面上显示时才使用此布局：

<img src="..."><span class="hidden-phone">Text1</span>
<img src="..."><span class="hidden-phone">Text2</span>
...

您可以在Bootstrap - Responsive Design

中查看有关此课程的更多信息