同じ行に定義リストdt、＆ddを表示

Question

詳細ページに、タイトルとデータが同じ行にあるいくつかの行のデータを表示します。データはうまく表示されていますが、タイトルが少し長いので、同じ行には当てはまりません。それは次の行に及ぶ。たとえば、「講演者と視聴者との交流」は、タイトルの前半に新しい行に表示される「視聴者」の代わりに、1行/ 1行で表示することをおすすめします。私はしばらく遊んでいますが、何も動かないようです。

これは私が見る

<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

次のようにブートストラップ列の組み合わせを使用してくださいようなものです

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