左のコンテンツを整列するには？

Question

ブートストラップのdlをdl-horizontalクラスで使用しているときに問題が発生しています。 xsのmdとlgビューポートではdlの説明が正しく表示されます。しかし、smビューポートでは、dlのコンテンツはその親の境界を離れます。

ここにはxsビューポートがあります。

次に大きいもの

...そして、問題はmdビューポートに表示されます。

ここではそのdivに関連するコードです：

<div class="col-sm-3"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading text-center"> 
        Stats 
       </div> 
       <div class="panel-body"> 
        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#">Basic</a></li> 
         <li><a href="#">Advanced</a></li> 
        </ul> 
        <dl class="dl-horizontal text-muted"> 
         <dt> 
          Nodes: 
         </dt> 
         <dd> 
          7 
         </dd> 
         <dt> 
          Bandwidth: 
         </dt> 
         <dd> 
          3 kbps 
         </dd> 
         <dt> 
          Average hops: 
         </dt> 
         <dd> 
          3 
         </dd> 
         <dt> 
          Latency: 
         </dt> 
         <dd> 
          100 ms 
         </dd> 
        </dl> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

を追加する必要があります。

.dl-horizontal dt { text-align: left; } 

See it here

Answer 2

あなたはDTのtext-align: centerプロパティを消去するには、このプロパティを追加することができますdt要素のスタイルwidth: auto;