html - タグ付きのブートストラップ ボタンがグループ化されない

Question

まず、私は 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

Answer 1

タグ内に .btn クラスを入れています<a>。.btnただし、要素が の直接の子である場合にのみ、twitter-bootstrap フレームワークのグループ ボタンが表示されます.btn-group。実際、ルールは で記述される場合があり.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>

Answer 2

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>

デモ