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 に答える