html - 将按钮放在页眉内

Question

假设我有这段代码是我对 spring 元素的看法之一:

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

(没有潜台词)。我如何放置一组像这样的按钮:

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

在 page-header 内，右对齐？

Answer 1

使用 Bootstrap 的 pull-right 类让它们向右浮动:

.header-btn-group{
  top: 2px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="page-header">
  <div class="btn-group pull-right header-btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>
  <h1>Example page header <small>Subtext for header</small></h1>
</div>