在每个领域和标签周围的形式边框

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>

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

如何实现带边框的预期用户界面？

Answer 1

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

这是基本想法：

.row {
  border: 2px solid black;
}

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

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

revised demo