行中引導按鈕旁邊的中心文本

如果我在Bootstrap中有一行中有按鈕的文本，那麼讓文本與按鈕中的文本排成一行的最佳方式是什麼？ http://jsfiddle.net/TNRgu/9/演示 - 「foo」，「bar」和「sometext」與按鈕頂部對齊，如何讓它們垂直居中？行中引導按鈕旁邊的中心文本

<div class="container"> 
    <div class="row"> 
     <a class="span2">foo</a> 
     <a class="span2">bar</a> 
     <span class="span2>some text</span> 
     <div class="span2"> 
     <button class="btn btn-success"> 
      <i class="icon-off icon-white"></i> 
      <span>Baz</span> 
     </button> 
     </div> 
    </div> 
    </div>

我知道我可以（例如）爲5px填充添加到每個的頂部，但有一個更通用的方法，使其始終排隊？

編輯：調整上面的標籤後添加

來源

2013-03-26 MrPurpleStreak

有這個沒有OOB解決方案，您將需要一些定製。 Bootstrap並不能讓你有一排高度相等的跨度。 – Nix 2013-03-26 21:39:17

當我們剛剛使用

時，生活變得如此簡單;）padding-top：5px然後是 – MrPurpleStreak2013-03-26 21:54:24

我確信那裏的人有一個解決方案，所以我在等着，看着......並且希望。 – Nix 2013-03-27 00:23:30

回答

您可以在鏈接中使用btn-link類：

<div class="container"> 
    <div class="row"> 
    <div class="span2"> 
     <a class="btn btn-link">foo</a> 
    </div> 
    <div class="span2"> 
     <a class="btn btn-link">bar</a>  
    </div> 
    <div class="span2"> 
     <button class="btn btn-success"> 
     <i class="icon-off icon-white"></i> 
     <span>Baz</span> 
     </button> 
    </div> 
    </div> 
</div>

從引導文件：

淡化按鈕通過使它看起來像一個鏈接，同時保持按鈕行爲

UPD btn-link類也可以應用於span，所以它看起來像一個鏈接

或者，您可以創建類似的東西btn-link類，例如btn-text：

.btn-text, 
.btn-text:active, 
.btn-text:hover, 
.btn-text:focus { 
    color: inherit; 
    cursor: inherit; 
    border-color: transparent; 
    background-color: transparent; 
    background-image: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
      box-shadow: none; 
}

http://jsfiddle.net/TNRgu/10/

來源

2013-03-27 07:12:43 sody

有用的感謝 - 但是我也有一個在那裏以及在另一個「列」這樣的。對不起 - 將更新這個問題！ – MrPurpleStreak 2013-03-27 11:26:52

你也可以在span上使用btn-link，如果它看起來像鏈接或者你可以像更新的答案一樣創建你自己的btn-text類。 – sody 2013-03-27 13:29:09

謝謝 - 這將很好:) – MrPurpleStreak 2013-03-28 15:38:01

相關問題