我需要在大屏幕上顯示說明文字旁邊的圖標，但在小圖標上只顯示圖標。將兩個跨度放在同一行上彼此相鄰？

我想這一點：

 <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

將兩個跨度放在同一行上彼此相鄰？

回答

編輯

相關問題