css 使用Bootstrap将按钮组放置在标头的最右侧

zpjtge22 于 2022-12-30 发布在 Bootstrap

关注(0)|答案(3)|浏览(252)

我已经成功地将一个按钮组放置在了一个标题的远端（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/

css

来源：https://stackoverflow.com/questions/13136194/place-button-group-at-the-far-right-side-of-a-header-with-bootstrap

3条答案

按热度按时间

wlsrxk511#

这是如何得到一个按钮排队与头在 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/>

赞(0）回复(0）举报 2022-12-30

xxls0lw82#

试试这个css代码

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

H1/H2/H3上的动态标头，可能是H4
演示：http://jsfiddle.net/PKrUC/2/

赞(0）回复(0）举报 2022-12-30

zhte4eai3#

使用float将禁用te display:inline-block;属性，使其浮动到顶部。
只需将引导类text-right添加到容器中，以保持垂直对齐不变。

赞(0）回复(0）举报 2022-12-30

我来回答

css 使用Bootstrap将按钮组放置在标头的最右侧

3条答案

相关问题

热门标签

最新问答