将边框应用于表单中的所有字段和标签

Question

我需要设置 bootstrap 3 表单的样式，例如每个表单字段和标签周围都有一个边框。像这样 -

我不知道该怎么做。这是我实现这一目标的尝试（请扩展输出，以便在每行中看到 2 列）-

https://jsfiddle.net/yy7ddtby/15/

.custom-label {
  line-height: 3.3em !important;
}

.label-size {
  /*font-size: 10px;*/
  line-height: 2.1em;
  /*padding-right:0px;
   width: 10%;*/
}

.border {
  color: #555;
  border: 1px solid #ccc;
  border-radius: 1px;
  padding: 5px;
}

<div class="container-fluid">

  <form>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="name" class="col-md-4 label-size custom-label border">Name</label>
          <div class="col-md-8 border">
            <input type="text" id="name" class="form-control input-field">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="gender" class="col-md-4  label-size custom-label  border">Gender</label>
          <div class="col-md-8  border">
            <select id="gender" class="form-control input-field">
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-md-4  label-size custom-label">Functions</label>
          <div class="checkbox col-md-8 label-size">
            <label>
                  <input type="checkbox" id="Func1"> Func1</label>
            <label>
                  <input type="checkbox" id="Func2">Func2</label>
            <label>
                  <input type="checkbox" id="Func3">Func3</label>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="country" class="col-md-4  label-size custom-label">Country</label>
          <div class="col-md-8">
            <select id="country" class="form-control input-field">
              <option>Select</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="options" class="col-md-4 label-size custom-label">Options</label>
          <div class="col-md-8">
            <select id="options" class="form-control input-field">
              <option>Select</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
          <div class="col-md-8">
            <input type="text" id="addr" class="form-control input-field">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="author" class="col-md-4  label-size custom-label">Author</label>
          <div class="col-md-8">
            <input type="text" id="author" class="form-control input-field">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="range1" class="col-md-4  label-size custom-label">Range1</label>
          <div class="col-md-3">
            <input type="text" id="range1" class="form-control input-field">
          </div>
          <div class="col-md-2">
            to
          </div>
          <div class="col-md-3">
            <input type="text" id="range2" class="form-control input-field">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="ip" class="col-md-4 label-size custom-label">IP</label>
          <div class="col-md-8">
            <input type="text" id="ip" class="form-control input-field">
          </div>
        </div>
      </div>

    </div>



  </form>

</div>

我尝试使用称为边框的自定义 CSS 设置第一行的样式。但是，它看起来不像我想要的那样。它生成的边框非常不整齐，而不是图像中的方式。

如何才能实现带有边框的预期 UI？

Answer 1

我实际上会给整行加上边框，然后在表单元素上使用左/右边框将它们分开。

这是基本的想法：

.row {
  border: 2px solid black;
}

.form-group > label {
  border-right: 2px solid black;
}

input {
  border-right: 2px solid black;
}

revised demo