Question

Bootstrap 3面板标题包含可点击图像和引导程序图像下拉列表。使用bootstrap form-inline类强制图像位于同一行。 Bootstrap drowpdown出现在新行中。

如果元素

<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来改变颜色。

＆＃13;

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

＆＃13;

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

＆＃13;

如何将图片下拉列表放在面板标题

1 个答案: