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是对的：它在媒体查询中。但是，您应该更改$scope.test = {}; $scope.test.selectedContract = {}; $scope.mySelected = $scope.test.selectedContract $scope.mySelected2 = $scope.test.selectedContract.name变量。

，而不是复制CSS

@dl-horizontal-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-horizontal-offset，现在列表的术语和定义位于一行。

Answer 2

.dl-horizontal的CSS位于媒体查询中。您可以简单地将其复制出来并将其添加到普通的CSS中。这看起来应该是您所需要的一切。

您可能希望缩小dt的宽度以及dd的左边距，以便在较小的屏幕上更好地适应。

.dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

为响应窗口

2 个答案: