Bootstrap水平描述列表空白

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

这是由于定义文本的固定宽度。请参阅bootstrap中的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%;
}

添加课程＆＃39;卡片描述＆＃39;你的dl：

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

当然，只有当您的视口（=屏幕）大于768px时，这一切才有效。

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