twitter-bootstrap - 按钮高度到行高

Question

您好，我正在使用 Bootstrap 3，我有这段代码:

<div class="row">
    <div class="col-sm-2 col-md-2 col-lg-2"><button>Öğrenci Projeleri</button></div>
    <div class="col-sm-2 col-md-2 col-lg-2"><button>İş Projeleri</button></div>
    <div class="col-sm-2 col-md-2 col-lg-2"><button>Grafik Tasarım</button></div>
    <div class="col-sm-2 col-md-2 col-lg-2"><button>Üniversite Başvuruları</button></div>
    <div class="col-sm-2 col-md-2 col-lg-2"><button>Danışmanlık</button></div>
    <div class="col-sm-2 col-md-2 col-lg-2"><button>&Fazlası</button></div>
</div>

按钮高度相等但按钮高度不等于行高，我想说的是按钮与行的顶部/底部之间存在间隙。

如果我增加按钮高度，行高会相应增加

如何在不增加行高的情况下消除间隙或增加按钮高度？我希望按钮顶部和底部边框触及行顶部和底部

谢谢

Answer 1

通常 btn 类(按钮 Bootstrap 的基类)有这样的边距或填充

.btn {
     -moz-user-select: none;
     background-image: none;
     border: 1px solid transparent;
     border-radius: 4px;
     cursor: pointer;
     display: inline-block;
     font-size: 15px;
     font-weight: normal;
     line-height: 1.42857;
     margin-bottom: 0;
     padding: 10px 15px;    /* this margin */
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
 }

您可以避免重新定义类 locallmente 或在您自己的 Bootstrap 版本中或通过分配更改常规设置的样式来干预单个按钮的规范，例如:

 <a class="btn btn-primary glyphicon glyphicon-plus" 
       href="yourRef" 
       style="padding: 3px 2px;"></a>