Question

我想在“详细信息”页面上显示几行数据，每个页面都有同一行的标题和数据。数据显示正常，但由于我的标题有点长，所以它不适合同一条线。它延伸到下一行。例如，我想要标题＆＃34; 演讲者与观众的互动＆＃34;以一行/一行显示，而不是＆＃34; 与受众＆＃34;出现在标题前半部分的新线上。我已经玩了一段时间，但似乎没有任何作用。

这就是我在视图中拥有自己风格的方式

<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>

显示定义列表，dt，＆amp; dd在同一条线上

1 个答案: