Question

我正在尝试将下拉添加到面板标题（bootstrap）。我已经对齐下降到右边，但它没有正确定位。

代码

select trim('0' from trim(' ' from address))
from customers
where
    trim('0' from trim(' ' from address)) NOT IN ( '1234 MAIN ST',
                                                   '1234 WOOD ST',
                                                   ...
                                                 )

Answer 1

在这种情况下我要做的是在应用btn-group样式之前移动<h3>标记内的float:right;（使用style="float:right;"或class="pull-right" ）。然后，只需将上边距调整为使其更适合panel-title的内容，例如-8px：

<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>
          <div class="btn-group pull-right" style="margin-top:-8px;">
            <button class="btn">Action</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Item I</a></li>
              <li><a href="#">Item II</a></li>
              <li><a href="#">Item III</a></li>
              <li class="divider"></li>
              <li><a href="#">Other</a></li>
            </ul>
          </div>
          Analytics
        </h3>
      </div>
      <div class="panel-body">
        <div id="analytics-chart"></div>
      </div>
    </div>
  </div>                    
</div>

此外，请记住在使用dropdown-menu-right时将pull-right添加到您的下拉菜单中，否则会超出屏幕边缘。

添加到panel-heading课程时，按钮永远不会表现良好，但您可以随意调整课程以满足您的需求。

希望这有帮助！

Bootply Example

定位下拉在面板标题boostrap中

1 个答案: