Question

编辑链接和按钮组未正确对齐。与编辑链接按钮匹配时，按钮组略低于下方。我希望他们都对齐。我想在不使用任何CSS的情况下这样做。

以下是代码：

<div class="btn-group" role="group" aria-label="...">
  <a href="/cs/roger/index.php?type=editing" class="btn btn-warning">Editing</a>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle
glyphicon glyphicon-list" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <li><a href="/cs/roger/index.php?type=open" >Open</a></li>
      <li><a href="/cs/roger/index.php?type=approved" >Approved</a></li>
    </ul>
  </div>
</div>

这是小提琴：JSFIDDLE 谢谢你的帮助。

Answer 1

只需将glyphicon添加到span

中的其他button即可

＆＃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"/>
<div class="btn-group" role="group" aria-label="...">
    <a href="/cs/roger/index.php?type=editing" class="btn btn-warning">Editing</a>
    
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Project Status">
            <span class="glyphicon glyphicon-list "></span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="/cs/roger/index.php?type=open" >Open</a></li>
            <li><a href="/cs/roger/index.php?type=approved" title="Lists all approved projects">Approved</a></li>
        </ul>
    </div>
</div>

＆＃13;

在您的示例中，您将glyphicon类添加到button本身。

<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-list" data-toggle="dropdown" aria-expanded="false" title="Project Status">
  <span class="caret"></span>
</button>

这将导致稍微错误的格式化。只需在span内提供它自己button的字形。

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Project Status">
    <span class="glyphicon glyphicon-list "></span>
    <span class="caret"></span>
</button>

href链接和下拉列表btn-group div未正确对齐

1 个答案: