Отображать твиттер-бутстрап btn-group inline с текстом

Проблема

Я хочу иметь возможность использовать группу btn для начальной загрузки twitter и отображать кнопки слева от некоторого текста. Не уверен, что это уже доступно в twitter bootstrap или если мне нужно добавить некоторые css.

Что у меня

В настоящее время у меня есть группа btn, определенная двумя кнопками. Затем я получаю после кнопок строку текста.

<p>
    <div class="btn-group" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   String to display after buttons on same line
</p>

Что я пробовал

Я пробовал несколько вещей здесь. Я изменил тег <p> как <div class="row"> с двумя разделителями div, один для кнопок и один для текста, но это не сработало. Я также пробовал следующее:

<div>
    <div class="btn-group inline" data-toggle="buttons-checkbox">
        <div class="btn btn-small">BTN Text 1</div>
        <div class="btn btn-small">BTN Text 2</div>
    </div>
   <span class="inline">String to display after buttons on same line</span>
</div>

и определяется в css .inline {display:inline-block; zoom:1; *display: inline;} Однако это тоже не сработало. Это то, что я получаю. Как вы можете видеть, текст отображается ниже группы кнопок. Я хочу, чтобы текст был справа от группы кнопок.

What the above is giving me

Вопрос

Что я могу сделать, чтобы группа кнопок отображалась справа от строки? Есть ли что-то уже встроенное в twitter bootstrap для этого, если да что? Если нет, был ли я на правильном пути создания встроенного класса, если это так, почему это не сработало?

Обновление

Спасибо RichardTowers за предложение по левому классу группы кнопок. Однако при добавлении большего количества наборов (что необходимо) я получаю следующее: With pull-left class added to btn-group

Я предполагаю, что это из-за плавания. Правильно ли это и как я могу это исправить?

Ответы

Ответ 1

Поместите pull-left на кнопки div: http://jsfiddle.net/dbTqC/653/

Я думаю, что это просто устанавливает float: left, поэтому вам нужно будет очистить вещи под ним. Для этого существует класс clearfix.

Стоит взглянуть на некоторые ресурсы CSS, чтобы вы поняли, что происходит здесь.

Ответ 2

<p class="btn-toolbar">
  <span class="btn-group">
    <a href="#" class="btn">Button 1</a>
  </span>
  <span class="btn-group">
    <a class="btn" href="#">Button 2</a>
    <a class="btn" href="#">Button 3</a>
  </span>
  <span class="btn-group">Text here.</span>
</p>

Ответ 3

Я сделал, как было предложено в этом SO answer, поэтому в основном я начал с стиля .navbar .brand и немного адаптировался.
Если интересно, вот мой измененный стиль:

/* See .navbar .brand style in bootstrap.css for a reference */ 
.btn-toolbar .title {
  display: block;
  float: left;
  margin-top: -4px; /* Recover part of margin set in child Header nodes */
  margin-left: 10px;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
}

Использование HTML:

<div class="btn-toolbar">
    <div class="btn-group pull-left">
        <a class="btn" href="#/search">Search...</a>
    </div>
    <div class="title">
        <h4>View offers</h4>
    </div>
    <div class="btn-group pull-right">
        <a class="btn" href="#/batchDelete">Delete ...</a>
        <a class="btn" href="#/new">New</a>
    </div>
</div>

и конечный результат:

Title in toolbar

Ответ 4

Это работает:

<p>Hello <span class="btn-group">...</span></p>