Question

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

我想要完成的任务：

获取每个输入的标题/标签位于顶部（水平）。
右侧对齐（因此在手机上看起来很漂亮）。
前面有glyphicons - 这是困难的，因为有了它我无法正确格式化

如果我太不清楚自己想要完成什么，你还可以看一下描述这种形式的超高科技图片： http://i.imgur.com/xcvL0hp.jpg

我的代码半工作代码是：

<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>

我不确定我是否正确格式化了stackoverflow（这是我的第一个问题）所以它也在语法高亮显示：http://pastebin.com/LzN1vbYi

我知道非常相似的问题有很多答案，但是前面的字形使得代码都没有工作。我尝试了大约15种不同的方法。

Answer 1

你应该试试这个表格

<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>

Bootstrap形式对齐，垂直和水平

1 个答案: