选项1

Question

最初，我的标题采用单行格式：

标题•说明

当宽度减小时，我希望它显示为两行，没有项目符号点：

标题
描述

我搜索过，找不到最优雅/普遍接受的方法。如果没有额外的库，似乎没有任何方法可以跟踪高度变化，这些库不是首选。我们确实有jQuery可以使用。

Answer 1

将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您可以控制＆＃34; bullet＆＃34;使用.hidden-xs，.hidden-sm，.hidden-md或.hidden-lg CSS类显示或隐藏。

参考

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

Answer 2

选项1

使用Bootstrap网格系统（最简单的方法）

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

您的内容将在平板电脑上显示2列，展示位置和大桌面

标题•说明

并将在移动设备上显示垂直堆栈：

标题

描述

选项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列，展示位置和大桌面（最小320像素）

标题•说明

并将在移动设备上显示垂直堆栈:(最大320px）

标题

描述

根据身高变化隐藏内容

2 个答案:

选项1

选项2