Bootstrap horizontal description list whitespace

Question

Как удалить пробел слева от описания 1 и 2? Есть ли лучшая альтернатива, чем списки горизонтального описания?

Вот проблема на моем сайте (описания слишком далеко вправо)

<div class="media"> 

      <!-- Card images --> 
      <div class="col-lg-5"> 
       <div class="center-block"> 
        <img id="card-image" src="images/demo-1.png" alt="Placeholder" width="150" height="224"> 
        <img id="card-image-2" src="images/demo-2.png" alt="Placeholder" width="150" height="224"> 
       </div>      
       <br> 
       <dl class="dl-horizontal"> 
        <dt>Set :</dt><dd>Basic</dd> 
        <dt>Type :</dt><dd>Minion</dd> 
        <dt>Rarity :</dt><dd>Free</dd> 
        <dt>Cost :</dt><dd>1</dd> 
        <dt>Attack :</dt><dd>1 <img src="icons/attack.png" alt="Attack Icon" width="10px" height="12px"></dd> 
        <dt>Durability :</dt><dd>3 <img src="icons/Health.png" alt="Attack Icon" width="10px" height="12px"></dd> 
        <br> 
        <dt>Ability :</dt><dd>Taunt</dd> 
        <dt></dt><dd>Taunt</dd> 
       </dl> 
      </div> 
</div> 

Answer 1

Это связано с фиксированной ширины текста определения. Смотрите код CSS от начальной загрузки:

dl-horizontal dt { 
    float: left; 
    width: 160px; 
    overflow: hidden; 
    clear: left; 
    text-align: right; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Теперь то, что вы можете сделать, это перезапись этого описания:

.card-description > dt, .card-description > dd { 
    width: 50%; 
    padding-left: 5px; 
    padding-right: 5px; 
} 
.card-description > dd { 
    margin-left: 50%; 
} 

И добавив класс 'карт-описание' к вашему дл:

<dl class="dl-horizontal card-description">

Конечно, все это будет работать, только если ваш порт просмотра (= экран) больше 768 пикселей.

http://jsfiddle.net/tb2r9kj5/1/