最初，我的頭取單行形式：隱藏內容基於高度變化

標題•描述

當寬度被減小，我想它顯示爲兩行，沒有子彈點：

標題
說明

我已經搜查，並不能找到最優雅/普遍接受的方式來做到這一點。沒有額外的庫，似乎沒有任何方法來跟蹤高度變化，這不是首選。我們確實有jQuery來處理。

來源

2017-04-12 user1234

你熟悉'Twitter的Bootstrap' http://getbootstrap.com/css/#grid和'Zurb Foundation' http://foundation.zurb.com/grid.html –

@ HamzaRashid我很熟悉。這些幫助怎麼樣？有了這個小小的補充，我希望不要推出任何新的大型框架。我想，如果這個問題有一個優雅的解決方案，那麼現在是時候我們考慮將它們用於更廣泛的用途。 – user1234

你也可以爲此編寫自己的代碼，搜索'CSS @media query' –

添加Twitter Bootstrap依賴於<head>部分

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

示例代碼：

<div class="row"> 
    <div class="col-md-6">Title</div> 
    <div class="col-md-6"><span class="hidden-xs hidden-sm">•</span> Description</div> 
</div>

可以調整當文本顯示爲單行或使用col-lg-6，col-md-6，col-sm-6或col-xs-6多行。

參考

http://getbootstrap.com/css/#grid

使用Bootstrap您可以控制在「子彈」的節目或使用.hidden-xs，.hidden-sm，.hidden-md或.hidden-lg CSS類皮等。

參考

http://getbootstrap.com/css/#responsive-utilities

來源

2017-04-12 03:13:43

選項1

使用引導網格系統（最簡單的方法）

<div class="row"> 
    <div class="col-sm-6">Title</div> 
    <div class="col-sm-6">Description</div> 
</div>

您的內容將顯示在平板電腦2列，destop &大桌面

標題•描述

，並會在移動垂直堆棧：

標題

說明

選項2

使用CSS媒體查詢

HTML

<div class="title">Title</div> 
<div class="desc">Desc</div>

CSS

@media (min-width: 320px) { 
    .title, .desc { 
    display: inline; 
    width: 50% 
    } 
@media (max-width: 320px) { 
    .title, .desc { 
    display: block; 
    width: 100% 
    }

您的內容將顯示在平板電腦2列，destop &大型桌面（最小320像素）

標題•描述

，並將顯示的在垂直在手機上堆疊:(最大320px）

標題

說明

來源

2017-04-12 03:31:09

您沒有解決'Title•Description'中'Title'和'Description'之間發生了什麼「點」。 –

隱藏內容基於高度變化

回答

選項1

選項2

相關問題