我需要在大屏幕上显示说明文字旁边的图标，但在小图标上只显示图标。将两个跨度放在同一行上彼此相邻？

我想这一点：

 <div class="col-lg-1"> 
      <span class="glyphicon @line.ArrowType"> </span> <span class="visible-lg"><small>@line.EntityEventType</small></span> 
     </div>

但它把文本上的图标下一条线。没有围绕@line ....的跨度，它的工作原理，但我需要有条件地显示基于屏幕大小的文本。

有没有办法让两个跨度在同一条线上相邻？

来源

2015-10-19 Craig

跨度应该被显示在同一行上。这是一个引导问题？ https://jsfiddle.net/q0vc6swm/ – lilezek

你应该使用.visible-*-inline为.visible-lg就是为什么您遇到的问题。见。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-1"> <span class="glyphicon glyphicon-plus"> </span> <span class="visible-lg-inline"><small>Yup</small></span> 
 

 
     </div> 
 
    </div> 
 
</div>

来源

2015-10-19 00:29:41 vanburen

解决！谢谢！从来不知道这个内联的东西。 – Craig

没问题，很高兴我可以帮忙。 – vanburen

为什么.visible-lg的行为不像.visible-lg-inline。我在这里看不到这种感觉。不应该“默认排列”吗？ – lilezek

尝试改变：

<div class="col-lg-1">

随着一些较大的类：

<div class="col-lg-12">

为最大。

默认情况下，跨度不跳转到下一行：

https://jsfiddle.net/q0vc6swm/

编辑

这个问题似乎是可见的，LG。使用自定义类，而不是与媒体查询：

.visible-custom { 
    display: none; 
} 

@media (min-width: 1024px) { 
    .visible-custom { 
     display: initial; 
    }  
}

https://jsfiddle.net/q0vc6swm/2/

来源

2015-10-19 00:19:03 lilezek

谢谢。我用Bootstrap更新了你的例子，它似乎工作。必须是其他东西导致我的CSS。 https://jsfiddle.net/q0vc6swm/1/ – Craig

将两个跨度放在同一行上彼此相邻？

回答

编辑

相关问题