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>

来自bootstrap文档：

通过在维护时使其看起来像链接来强调按钮按钮行为

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

行中的bootstrap按钮旁边的中心文本

1 个答案: