按鈕高度，行高

你好我使用引導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行高度也相應增加

我怎麼能去除缺口或增加按鈕的高度不增加行高度？我想按鈕頂部和底部邊框觸摸行頂部和底部

感謝

來源

2015-10-05 Licentia

必須有其他人在你的自定義CSS一些東西，可能會造成這個，填充和/或保證金。否則，開箱即用不存在這樣的問題。看到這個快速小提琴來證明 - http://jsfiddle.net/abhitalks/svx9w0L1/ – Abhitalks

（* offtopic *）這個和其他答案（在你問的前幾個問題上）是否有幫助？如果您投票/接受答案或者甚至參與評論可能會幫助具有類似問題的未來訪問者輕鬆找到解決方案。此外，如果您對自己的問題有解決方案，請隨時編寫答案並將其標記爲已接受。歡迎來到SO。 –

正常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或在您自己的bootstrap版本中或通過分配改變常規設置的樣式來爲單個按鈕插入指定標籤。例如：

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

來源

2015-10-05 13:38:50 scaisEdge

你還沒有爲你的按鈕定義任何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>

來源

2015-10-05 15:48:13 vanburen

按鈕高度，行高

回答

相關問題