在同一行显示定义列表、dt 和 dd

Question

我想在详细信息页面上显示几行数据，每行数据的标题和数据位于同一行。数据显示良好，但由于我的标题有点长，它不适合同一行。它延伸到下一行。例如，我希望标题“Speaker's Interaction with Audience”显示在一行/行中，而不是“with Audience”显示在第一行下方的新行中标题的一半。我已经玩了一段时间，但似乎没有任何效果。

这就是我在视图中的风格

<style>
    dl {
        width: 395px;
        font-size: 15px
    }

    dd, dt {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    dt {
        float: left;
        padding-right: 5px;
        font-weight: bolder;
    }

    dt {
        clear: left;
    }

    dt, dd {
        min-height: 1.5em;
    }
</style>

而我的代码结构是这样的

<div>
    <h4>IndividualSessionEvaluation</h4>
    <hr />
    <dl class="dl-horizontal">

        <dt>
            @Html.DisplayNameFor(model => model.OnScreenPresentation)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.OnScreenPresentation)
        </dd>   

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersSubjectKnowledge)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersSubjectKnowledge)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SpeakersInteractionwithAudience)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.SpeakersInteractionwithAudience)
        </dd>
    </dl>
</div>

Answer 1

请按如下方式使用Bootstrap列组合

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

  <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
    <!-- Data -->
  </div>

  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <!-- Value -->
  </div>

</div>