Question

您好我正在使用bootstrap来创建一个大表单。我使用的是.form-horizontal和典型的.control-group，.control-label和.controls。

我需要使用类似于ol的数字来标记行，但我无法正确使用这些样式。

以下是代码的示例：

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </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>

Answer 1

我提出了一个似乎运作良好的解决方案。我在我要订购的部分周围添加了<div class="ordered-container">，然后我将下面的css包含在内。

.ordered-container {
    counter-reset: ordered-counter;
}

.ordered-container .control-label:before {
    content: counter(ordered-counter);
    counter-increment: ordered-counter;
}

编辑：我还在.no-count中添加了一个可选的.control-label类，以防我不计算元素（在我的用例中很有用）。新的css看起来像这样：

.ordered-container {
    counter-reset: ordered-counter;
}

.ordered-container .control-group:not(.no-count) .control-label:before {
    content: counter(ordered-counter);
    counter-increment: ordered-counter;
}

使用bootstrap创建包含订购商品的表单

1 个答案: