1

如果我在 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 填充，但是有没有更通用的方法让它总是对齐？

编辑：调整以上内容以在标签之后添加

4

1 回答 1

2

您可以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-27T07:12:43.417 回答