Zeige Definitionsliste, dt, & dd in derselben Zeile

Question

Ich möchte ein paar Zeilen von Daten auf einer Detailseite zeigen, die jeweils einen Titel und Daten in derselben Zeile haben. Die Daten sehen gut aus, aber da meine Titel etwas lang sind, passt es nicht in die gleiche Zeile. Es erstreckt sich auf die nächste Zeile. Ich möchte zum Beispiel den Titel "Interaktion des Referenten mit Publikum" in einer Zeile/Zeile anzeigen, anstatt "mit Publikum" in einer neuen Zeile unter der ersten Hälfte des Titels. Ich spiele schon eine Weile herum, aber nichts scheint zu funktionieren.

Dies ist, wie ich meinen Stil in der Ansicht

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

Und die Struktur meines Code haben, ist wie folgt

<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

Bitte geben Sie die Kombination Bootstrap-Säule wie folgt verwenden

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