Html 引导窗体对齐、垂直和水平

我正在尝试制作一个漂亮的表单，它可以用于boostrap-responsive.css移动应用。在我使用表格之前，它在没有引导响应的情况下工作得很好，但现在它在缩小时变得非常难看

我正在努力实现的目标：

获取每个输入的标题/标签，使其位于顶部（水平）

右边对齐（因此在手机上看起来很漂亮）

预先准备好glyphicons-这就是它的难点所在，因为有了它们，我无法正确格式化它

如果我太不清楚我想要完成什么，你也可以看看我的超高科技图片，它描述了形式：

我的代码半工作代码是：

<form class="form-vertical" ....>
<fieldset>
  <div class="row-fluid">
      <div class="span8 input-prepend">
        <label class="control-label" for="title">Title</label>
        <span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
        <input  type="text" name="title" id="title"   />
      </div>
      <div></div>
      <div class="span2 input-prepend">
        <label class="control-label" for="price">Price</label>
        <span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
        <input type="text" id="price" name="price"/>
      </div>
    </div>

    <div class="controls">
      <label class="control-label" for="description">Description</label>
      <div class="input-prepend">
        <span class="add-on"><i id="descriptionicon" class="icon-minus-sign"></i>/span>
        <textarea  name="description" rows="6" class="field span6" id="descriptionfield"></textarea>
      </div>
    </div>¨
</fieldset>
</form>

标题
价格
描述
/span>
¨

我不确定我是否为stackoverflow正确设置了格式（这是我的第一个问题），因此这里也有语法突出显示：

---

我知道对于非常相似的问题有很多答案，但那个带前缀的glyph使所有代码都不起作用。我尝试了大约15种不同的方法。

你应该试试这个表格

<div class="row-fluid>
 <div class="span12>
  <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="title">Title</label>
    <div class="controls">
      <span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
        <input  type="text" name="title" id="title"   />
    </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="price">Price</label>
    <div class="controls">
     <span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
        <input type="text" id="price" name="price"/>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>`
  </form>
 </div>
</div>

标题
价格
记得我吗
登录
`

这将使输入完全水平，而不是像我发布的图片那样垂直。除此之外，glyph图标没有预先设置。