Bootstrap을 사용하여 헤더의 맨 오른쪽에 버튼 그룹 배치

Bootstrap을 사용하여 헤더의 맨 오른쪽에 버튼 그룹 배치

---

헤더의 먼 쪽 (H1 / H2 / H3)에 버튼 그룹을 배치했습니다. 하지만 버튼을 가운데에서 수직으로 뜨는 방법을 모르겠습니다. 그것은 단지 정상에 머물러 있습니다. 사용해 margin-top보았지만 고정 값이기 때문에 중간에 동적으로 배치되지 않습니다.

다음은 스크린 샷입니다.

코드는 다음과 같습니다.

<div class="container">
  <section>
    <div class="page-header">
      <h1 class="pull-left">
        The header
      </h1>
      <div class="pull-right">
        <div class="btn-group">
          <button class="btn btn-primary">
            Actions
          </button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another Action</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    Contents
  </section>
</div>

미리 감사드립니다.

jsFiddle : http://jsfiddle.net/aurorius/PKrUC/

---

누군가가 Google에서 여기에 올 경우를 대비하여 추가 CSS없이 Bootstrap 3.2, 3.3에서 헤더와 정렬 된 버튼을 얻는 방법입니다.

옵션 1

http://jsfiddle.net/ypaL5nko/

<div class='page-header'>
  <div class='btn-toolbar pull-right'>
    <div class='btn-group'>
      <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
  </div>
  <h2>Header Text</h2>
</div>

버튼 그룹은 단일 버튼 만 사용하는 경우 선택 사항입니다.

옵션 2

http://jsfiddle.net/sLdnae3q/

<h1>
  <span>Header Text</span>
  <button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>

---

이 CSS 코드를 사용해보십시오

.btn-group.my-class{
  bottom: 15px;
  position: relative;
  top: 15px;
}

H1 / H2 / H3의 동적 헤더이며 H4 일 수 있습니다.

데모 : http://jsfiddle.net/PKrUC/2/

---

float를 사용하면 te display:inline-block;속성이 비활성화 되어 맨 위에 떠있게됩니다.

text-right컨테이너에 부트 스트랩 클래스 를 추가하기 만하면 수직 정렬이 그대로 유지됩니다.

참조 URL : https://stackoverflow.com/questions/13136194/place-button-group-at-the-far-right-side-of-a-header-with-bootstrap