css – 将按钮组放置在带有Bootstrap的标题的最右侧

前端之家收集整理的这篇文章主要介绍了css – 将按钮组放置在带有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/

解决方法

这个如何得到一个按钮排队与头在Bootstrap 3.2,3.3没有任何额外的CSS,以防任何人从这里来的谷歌。

选项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相关文章