html - 使用引导程序创建带有订购项目的表单

Question

嗨，我正在使用引导程序创建一个大型表单。我正在使用.form-horizontal典型.control-group的.control-label和.controls。

我需要用类似于或使用 an 的数字标记行，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;
}