如何将图像下拉列表放在面板标题的同一行中

Question

Bootstrap 3 面板标题包含可点击的图像和 bootstrap 图像下拉列表。使用 bootstrap form-inline class 强制图像在同一行。 Bootstrap 下拉菜单出现在新行中。

如果元素

<div class="dropdown">

替换为

<button class="dropdown" type="button">

下拉菜单出现在同一行，但在这看起来像带有边框和背景的按钮。

如何将图片下拉菜单与其他按钮放在同一行？

<div class="panel panel-success grid-panel-header">
        <div id='contentCaptionDiv' class="panel-heading">
     <div class="panel-title form-inline">
        <a class="btn" href="Show">
            <i class="fa fa-male" aria-hidden="true"></i>
        </a>
        <a class="btn" href="Delete">
            <i class="fa fa-female" aria-hidden="true"></i>
        </a>


    <div class="dropdown" type="button">
    <div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">
        <i class="glyphicon glyphicon-cog"></i><span class="caret"></span>
    </div>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
  </ul>
  </div>
</div>

 panel content here
</div>

Answer 1

您可以使用 btn-link 并添加一些 CSS 来改变颜色。

.grid-panel-header .btn-custom,
.grid-panel-header .btn-custom:hover,
.grid-panel-header .btn-custom:focus {
  color: #255625;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<hr>
<div class="panel panel-success grid-panel-header">
  <div id='contentCaptionDiv' class="panel-heading">
    <div class="panel-title form-inline">
      <a class="btn" href="Show">
        <i class="fa fa-male" aria-hidden="true"></i>
      </a>
      <a class="btn " href="Delete">
        <i class="fa fa-female" aria-hidden="true"></i>
      </a>

      <!-- Large button group -->
      <div class="btn-group">
        <button class="btn btn-link btn-custom dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i>  <span class="caret"></span>

        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a>

          </li>
          <li><a href="#">Another action</a>

          </li>
          <li><a href="#">Something else here</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<hr>

如何将图像下拉列表放在面板标题的同一行中

How to place image dropdown in same row in panel title

html

css

twitter-bootstrap

drop-down-menu

twitter-bootstrap-3