引导水平描述列表空白 [英] Bootstrap horizontal description list whitespace

问题描述

如何删除说明1和2左侧的空格？有没有比水平描述清单更好的选择？ 输入图片描述>

这是我自己网站上的问题（描述太离谱了）

 < div class =media> 
 
 <！ - 卡片图片 - > 
< div class =col-lg-5> 
< div class =center-block> 
< img id =card-imagesrc =images / demo-1.pngalt =占位符width =150height =224> 
< img id =card-image-2src =images / demo-2.pngalt =占位符width =150height =224> 
< / div> 
< br> 
< dl class =dl-horizo​​ntal> 
< dt> Set：< / dt>< dd> Basic< / dd> 
< dt>类型：< / dt>< dd> Minion< / dd> 
< dt> Rarity：< / dt>< dd>免费< / dd> 
< dt>成本：< / dt>< dd> 1< / dd> 
< dt> Attack：< / dt>< dd> 1< img src =图标/ attack.pngalt =攻击图标width =10pxheight =12px> < / DD> 
< dt>耐久度：< / dt>< dd> 3< img src =图标/ Health.pngalt =攻击图标width =10pxheight =12px> < / DD> 
< br> 
< dt>能力：< / dt>< dd> Taunt< / dd> 
< dt>< / dt>< dd> Taunt< / dd> 
< / dl> 
< / div> 
< / div> 
  

解决方案

这是由于定义文本的固定宽度。请参阅bootstrap的css代码：

  dl-horizo​​ntal dt {
 float：left; 
 width：160px; 
 overflow：hidden; 
 clear：left; 
 text-align：right; 
文本溢出：省略号; 
 white-space：nowrap; 
 
 $ / code> 

现在您可以做的是覆盖以下描述：

  .card-description> dt，.card-description> dd {
 width：50％; 
 padding-left：5px; 
 padding-right：5px; 
} 
 .card-description> dd {
保证金余额：50％; 
} 
  

并将类'card-description'添加到您的dl：

< dl class =dl-horizo​​ntal card-description>

当然，只有当您的视图端口（=屏幕）大于768px时，才会有效。

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

How do I remove the white space to the left of Description 1 and 2? Is there a better alternative than horizontal description lists?

Here's the problem on my own site (descriptions are too far to the right)

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

解决方案

This is due to the fixed width of the definition text. See the css code from bootstrap:

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

Now what you can do, is overwriting this description:

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

And adding the class 'card-description' to your dl:

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

Of course this will all work only if your view port (= screen) is bigger then 768px.

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

这篇关于引导水平描述列表空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！