Как выровнять встроенные радиостанции/флажки и элементы блока помощи в горизонтальной форме с помощью Twitter Bootstrap 3

Несколько дней назад Twitter Bootstrap 3 RC1 выпущен, и я только начал играть с ним в личном проекте.

У меня есть горизонтальная форма, которая включает некоторые встроенные группы радио-меток, но горизонтальное выравнивание этих элементов не равно:

Вопрос 1: Почему хром не отображает элемент справочного блока в одной строке с меткой?

Вопрос 2: Как выровнять встроенную радиогруппу в одной строке с меткой?

Вопрос 3: Является ли следующая разметка действительной? Связаны ли эти проблемы с разметкой?

Разметка:

<div class="container">
  <form class="form-horizontal">

  <div class="form-group">
    <label class="col-lg-2 control-label">Weight</label>
    <div class="col-lg-1">
      <input type="text" name="weight" class="form-control" value="20">
    </div>
    <div class="help-block"> grams</div>  
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Full part name</label>
    <div class="col-lg-6">
      <input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Inline radios</label>
    <div class="col-lg-10">
      <label class="radio-inline">
        <input type="radio" name="radio"> Hello
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Other
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Another
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio" checked="checked"> Foobar
      </label>
    </div>
  </div>
</form>
</div>

EDIT:

Также эта разметка на маленьком экране создает "сброшенный элемент элемента справки". Я думаю, что моя разметка проблематична, но я понятия не имею, что не так.