0

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

我要完成的工作：

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

  2. 右侧对齐（因此在手机上看起来很漂亮）。

  3. 预先添加字形图标 - 这很困难，因为使用它们我无法正确格式化

如果我不太清楚自己想要完成什么，你也可以看看我描述表格的超高科技图片：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 种不同的方法。

4

1 回答 1

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>
于 2013-08-01T10:41:02.980 回答