文本/图像响应式设计

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

大屏幕：

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

小屏幕：

<image1>; <image2>; <image3>

我怎么能这样做呢？谢谢！

来源

2013-04-28 myborobudur

你做了什么，但更重要的是哪里是问题？ – pickypg 2013-04-28 07:34:34

我的版本有帮助吗？ – myborobudur 2013-04-28 08:15:28

如果你想要一个100％的Bootstrap解决方案，你可以使用[Responsive Utility Classes]（http://twitter.github.io/bootstrap/scaffolding.html#responsive），以防万一不符合你的需求，你可以使用自定义媒体查询，如：@media all和（max-width：XXXpx）' – m90 2013-04-28 08:50:13

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

来源

2013-04-28 08:49:34 Pigueiras

非常好！我正在寻找.. – myborobudur 2013-04-28 19:25:29

文本/图像响应式设计

回答

相关问题