html - 为响应窗口禁用 Bootstrap dl-horizo​​ntal 类

Question

我使用 bootstrap 和 dl-horizontal 设计列表像这样上课:

<dl class="dl-horizontal">
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
  <dt>1</dt>  <dd>deta1</dd>
</dl>

这个工作和显示列表在大桌面上。但是，当我调整窗口大小时并检查响应式设计的窗口时 dd显示在<dt>下方.我需要显示 dd dt 的对面在所有窗口中。我该如何解决这个问题？

DEMO

Answer 1

@GusRuss89 是对的:它在媒体查询中。但是您不应复制 CSS，而应更改 @dl-horizo​​ntal-breakpoint 变量。

  @media (min-width: @dl-horizontal-breakpoint) {
    dt {
      float: left;
      width: (@dl-horizontal-offset - 20);
      clear: left;
      text-align: right;
      .text-overflow();
    }
    dd {
      margin-left: @dl-horizontal-offset;
    }
  }
}

我已将 @dl-horizo​​ntal-offset 更改为 400px，现在列表的术语和定义位于一行。