行中引导按钮旁边的居中文本

Question

如果我在 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 内边距，但有没有更通用的方法让它始终对齐？

编辑：调整了上面添加的标签

Answer 1

您可以在链接上使用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/