按钮高度到行高

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>

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

如果我增加buttonheight，行高会相应增加

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

由于

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版本或插入针对单个按钮的specificatamento，例如：

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

Answer 2

您尚未为按钮定义任何Bootstrap类，即.btn。您也可能想要使用button group，因为尝试在列中放置按钮通常不起作用。 （*红色背景表示row。）

body {
  text-align: center;
  margin-top: 50px;
}
div.row {
  background-color: red;
}
@media (max-width: 767px) {
  div.btn-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }
  div.btn-vertical > .btn,
  div.btn-group > .btn {
    position: relative;
    float: left;
  }
  div.btn-vertical > .btn,
  div.btn-vertical > .btn-group,
  div.btn-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }
  div.btn-vertical > .btn-group > .btn {
    float: none;
  }
  div.btn-vertical > .btn + .btn,
  div.btn-vertical > .btn +.btn-group,
  div.btn-vertical > .btn-group + .btn,
  div.btn-vertical > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
  }
  div.btn-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  div.btn-vertical > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  div.btn-vertical > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .btn-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
  }
  div.btn-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
  div.btn-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  div.btn-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
div.btn-group.btn-group-lg .btn,
div.btn-group .btn {
  border-radius: 0;
  border: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Standard Button Group.</h3>

  <div class="row">
    <div class="btn-group" role="group" aria-label="...">
      <button class="btn btn-primary">Öğrenci Projeleri</button>
      <button class="btn btn-warning">İş Projeleri</button>
      <button class="btn btn-default">Grafik Tasarım</button>
      <button class="btn btn-danger">Üniversite Başvuruları</button>
      <button class="btn btn-success">Danışmanlık</button>
      <button class="btn">&amp; Fazlası</button>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Justfied Button Group.</h3>

  <div class="row">
    <div class="btn-group btn-group-justified">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">Öğrenci Projeleri</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn btn-warning">İş Projeleri</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn btn-default">Grafik Tasarım</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn btn-danger">Üniversite Başvuruları</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn btn-success">Danışmanlık</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn">&amp; Fazlası</button>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="media-change">
  <div class="container">
    <h2>Custom Button Groups</h2> 
    <p>These will change from Horizontal to Vertical at a breakpoint for Mobile.</p>
    <div class="row">
      <div class="btn-group btn-vertical" role="group" aria-label="...">
        <button class="btn btn-primary">Öğrenci Projeleri</button>
        <button class="btn btn-warning">İş Projeleri</button>
        <button class="btn btn-default">Grafik Tasarım</button>
        <button class="btn btn-danger">Üniversite Başvuruları</button>
        <button class="btn btn-success">Danışmanlık</button>
        <button class="btn">&amp; Fazlası</button>
      </div>
    </div>
  </div>
  <hr>
  <div class="media-change">
    <div class="container">
      <h3>Custom Justfied Button Group.</h3>

      <div class="row">
        <div class="btn-group btn-group-justified btn-vertical">
          <div class="btn-group" role="group">
            <button class="btn btn-primary">Öğrenci Projeleri</button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn btn-warning">İş Projeleri</button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn btn-default">Grafik Tasarım</button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn btn-danger">Üniversite Başvuruları</button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn btn-success">Danışmanlık</button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn">&amp; Fazlası</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>