时间戳

首页 > 解决方案 > 如何防止 Bootstrap DD DT 下降到下一行？

twitter-bootstrap - 如何防止 Bootstrap DD DT 下降到下一行？

问题描述

我有以下代码，其中 DD DT 在同一行：

<dl class="row">
   <dt class="col-sm-2">Arahat</dt>
   <dd class="col-sm-10">The "Perfected One", who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
   <dt class="col-sm-2">Bodhi</dt>
   <dd class="col-sm-10">Awakened wisdom.</dd>
   <dt class="col-sm-2">Zen</dt>
   <dd class="col-sm-10">Meditative absorption in which all dualistic distinctions are eliminated.</dd>
</dl>

在移动屏幕上，它会折叠到另一个下方。我怎样才能防止这种情况？

在此处输入图像描述

我希望它如何留在手机屏幕上。 在此处输入图像描述

标签： twitter-bootstrapbootstrap-4

解决方案

而不是 class="row" 使用 class="dl-horizo​​ntal" 还从所有 DD 和 DT 标签中删除 col-sm 并使用 Bootstrap 3

推荐阅读