带有 <a> 标签的引导按钮不会组合在一起答案

【问题标题】：Bootstrap buttons with <a> tag don't group together带有 <a> 标签的引导按钮不会组合在一起
【发布时间】：2013-08-14 17:18:44
【问题描述】：

首先，我对 HTML 比较陌生，所以这可能很简单。

<div class="btn-group pull-center" style="text-align:center">
        <button class="btn btn-large btn-primary" type="button">Home</button>
        <button class="btn btn-large btn-primary" type="button">Forum</button>
        <button class="btn btn-large btn-primary" type="button">Bans</button>
        <button class="btn btn-large btn-primary" type="button">Store</button>  
    <?php
        if($_SESSION['isLogged'] == true) {
            $username = $_SESSION['username'];
    ?>  <a href="logout.php"><button class="btn btn-large btn-primary" type="button">Hello, <?php $username ?></button></a>
        <a href="logout.php"><button class="btn btn-large btn-primary" type="button">Log out</button></a>

    <?php    }else {
    ?>  <a href="login.php"><button class="btn btn-large btn-primary" type="button">Log in</button></a><?php
        }           

        ?>
    </div>

通常 btn-group 类有效并且它们分组。但是，如果我将 A 标记添加到按钮，则该按钮将不会分组。

这里有一些截图

http://imgur.com/a/G1d6C

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这应该适用于 Bootstrap。而且我这里没有按钮：

<div class="btn-group">
  <a class="btn">Home</a>
  <a class="btn">Forum</a>
  <a class="btn">Bans</a>
  <a class="btn">Store</a>
  <a href="logout.php" class="btn">Hello username</a>
  <a href="logout.php" class="btn">Log out</a>
  <a href="login.php" class="btn">Log in</a>
</div>

【讨论】：

【解决方案2】：

您将 .btn 类放在 <a> 标记中。但是，只有当.btn 元素是.btn-group 的直接子元素时，twitter-bootstrap 框架才会对按钮进行分组。事实上，规则可能写成.btn-group > .btn。

将.btn 类放在你的<a> 标签上，甚至删除这个无用的按钮标签，它就会起作用。例如：

<div class="btn-group pull-center" style="text-align:center">
  <a class="btn btn-large btn-primary" type="button">Home</a>
  <a class="btn btn-large btn-primary" type="button">Forum</a>
  <a class="btn btn-large btn-primary" type="button">Bans</a>
  <a class="btn btn-large btn-primary" type="button">Store</a>  
  <a href="" class="btn btn-large btn-primary" type="button">Hello, Username</a>
  <a href="logout.php" class="btn btn-large btn-primary" type="button">Log out</a>
</div>

【讨论】：

【解决方案3】：

不使用按钮，只需将btn 类添加到a 标记即可。示例：

<div class="btn-group pull-center" style="text-align:center">
  <a class="btn btn-large btn-primary">Home</a>
  <a class="btn btn-large btn-primary">Forum</a>
  <a class="btn btn-large btn-primary">Bans</a>
  <a class="btn btn-large btn-primary">Store</a>  
  <a href="logout.php" class="btn btn-large btn-primary">Hello, Username</a>
  <a href="logout.php" class="btn btn-large btn-primary">Log out</a>
  <a href="login.php" class="btn btn-large btn-primary">Log in</a>
</div>

Demo

【讨论】：