Question

Supose我有这个代码，我对我的春季项目有一个看法：

<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类：

让它们正确浮动

＆＃13;

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

＆＃13;

<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>

＆＃13;

在页眉中放置按钮

1 个答案: