высота Кнопка высота строки

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 класса (базовый класс кнопок начальной загрузки) имеет поля или Прокладки, как этот

.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 или в вашу собственную версию бутстрапа или промежуточную спецификацию для одиночной кнопки путем назначения стиля, который изменяет общие настройки, например:

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