列表项内的Bootstrap网格

Question

我想将Bootstrap 3 row和col-*放入我的编号列表中。更具体地说，我有一个允许添加多个地址的表单。每个地址由表单字段（街道，城市等）组成。这些字段在col-*中对齐，因为我需要控制它们在不同屏幕尺寸下的外观。

这是我对每个列表条目的期望：

相反，第二个列表的注释位于意想不到的位置：

https://jsfiddle.net/7h99oyLc/1/

Answer 1

变体2. content: counter(list)

我已将:before伪元素与counter属性一起使用，而不是<ol><li></li></ol>。

https://jsfiddle.net/glebkema/gfdxdnje/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.container-list {
  counter-reset: list;
  padding-left: 40px;
}

.container-list > .row {
  margin-top: 12px;
  position: relative;
}

.container-list > .row:before {
  counter-increment: list;
  content: counter(list) ".";
  display: block;
  position: absolute;
  right: 100%;
}

.container-list input {
  border: 2px solid black;
  margin-bottom: 8px;
  padding-left: 4px;
  width: 100%;
}

<div class="container container-list">
  <div class="row">
    <div class="col-xs-4">
      <input placeholder="field 1">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 2">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 3">
    </div>
    <div class="col-xs-3">
      <input placeholder="field 4">
    </div>
    <div class="col-xs-9">
      <input placeholder="field 5">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-4">
      <input placeholder="field 1">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 2">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 3">
    </div>
    <div class="col-xs-3">
      <input placeholder="field 4">
    </div>
    <div class="col-xs-9">
      <input placeholder="field 5">
    </div>
  </div>
</div>

变体1. float: right;

http://jsfiddle.net/glebkema/pwtkcusy/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

li {
  margin-top: 12px;
}
li .row {
  float: right;
  margin: 0;
  width: 100%;
}
li .row input {
  border: 2px solid black;
  margin-bottom: 8px;
  padding-left: 4px;
  width: 100%;
}

<div class="container">
  <ol>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <input placeholder="field 1">
        </div>
        <div class="col-xs-4">
          <input placeholder="field 2">
        </div>
        <div class="col-xs-4">
          <input placeholder="field 3">
        </div>
        <div class="col-xs-3">
          <input placeholder="field 4">
        </div>
        <div class="col-xs-9">
          <input placeholder="field 5">
        </div>
      </div>
      <div class="clearfix"></div>
    </li>

    <li>
      <div class="row">
        <div class="col-xs-4">
          <input placeholder="field 1">
        </div>
        <div class="col-xs-4">
          <input placeholder="field 2">
        </div>
        <div class="col-xs-4">
          <input placeholder="field 3">
        </div>
        <div class="col-xs-3">
          <input placeholder="field 4">
        </div>
        <div class="col-xs-9">
          <input placeholder="field 5">
        </div>
      </div>
      <div class="clearfix"></div>
    </li>
  </ol>
</div>