Кнопка отображения css bootstrap с текстом

Я использую twitter bootstrap.

Я пытаюсь создать кнопку с раскрывающимся списком, которая должна отображаться сразу после текста.

Кнопка и все создаются, но она появляется на следующей строке, а не на той же строке, что и мой texte.

Это более или менее код:

<h1> Some title


    <div class="btn-group" xmlns="http://www.w3.org/1999/html">
      <button class="btn btn-mini">Edit</button>
      <button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
         <li> ...my menu's...</li>
      </ul>
    </div>
</h1>

В теге h1 не назначено специальное позиционирование. Я попытался добавить float: слева к тегу h1, но он не работает, потому что есть четкое: оба в btn-группе css.

Что случилось? спасибо!

UPDATE:

Я также попытался добавить класс .pull-right в div. Это приводит к правильной линии, но находится справа от страницы. Не только после текста. Это слишком далеко.

Ответы

Ответ 1

Я действительно не знаю, как вы получили эту разметку, но вот рабочая версия: (demo on jsfiddle)

<h1> Some title
    <small>
        <span class="btn-group">
            <button class="btn btn-mini">Edit</button>
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">...my menus...</a></li>
            </ul>
        </span>
    </small>
</h1>

h1 .btn-group { display: inline-block; }

Я предлагаю вам использовать тег <small>, потому что он устанавливает несколько разных стилей из <h1>. Но для этого не требуется.