css - Bootstrap 3 - 间距问题

Question

我正在使用 Bootstrap 构建一个简单的表单，其中我面临一些与间距相关的布局问题。这是表格的样子

1. 标签和字段之间有很多空间。例如，在上图中，标签和名称字段之间的空白区域被突出显示。我想增加输入字段的宽度以减少空间。

2. 我想去除 2 个字段之间的垂直空间。例如，作者和 IP 字段之间有一个空格。我希望它们一起关闭。同样，无法找出原因。

This is the fiddle I have created to reproduce the problem.

.border {
  border: 1px solid;
}

.input-field {
  height: 20px
}

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

.label-size {
  font-size: 10px;
  line-height: 2.1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <form class="form-horizontal">
    <div class="col-md-8">
      <div class="form-group">
        <label for="name" class="col-md-4 label-size">Name</label>
        <div class="col-md-8">
          <input type="text" id="name" class="form-control input-sm input-field">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="gender" class="col-md-4 label-size">Gender</label>
        <div class="col-md-8">
          <select id="gender" class="form-control input-sm input-field label-size">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label class="col-md-4 label-size custom-label">Functions</label>
        <div class="checkbox col-md-8 label-size checkbox-primary" >
          <label class="col-md-3">
            <input type="checkbox" id="Func1"> Func1</label>
          <label class="col-md-3">
            <input type="checkbox" id="Func2">Func2</label>
          <label class="col-md-3">
            <input type="checkbox" id="Func2">Func3</label>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="country" class="col-md-4 label-size">country</label>
        <div class="col-md-8">
          <select id="country" class="form-control input-sm input-field label-size">
            <option>Select</option>
			<option>1</option>
			<option>1</option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <div class="col-md-3">
          <label class="label-size">Options</label>
        </div>
        <div class="col-md-9">

          <div class="checkbox checkbox-primary label-size col-md-3">
            <!-- there is a for loop here-->
            <!-- For every run of loop, one div [with col-xs-4] below will be created. Since loop is not there, I am creating multiple divs manually -->
            <input id="check1" type="checkbox"> check1
          </div>

          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>
          <div class="checkbox checkbox-primary label-size col-md-3">

            <input id="check1" type="checkbox"> check1
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="addr" class="col-md-4 label-size">ADDR</label>
        <div class="col-md-8">
          <input type="text" id="addr" class="form-control input-sm input-field">
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label for="authro" class="col-md-4 label-size">authro</label>
        <div class="col-md-8">
          <input type="text" id="authro" class="form-control input-sm input-field">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="range" class="col-md-4 label-size">Range</label>
        <div class="col-md-3">
          <input type="text" id="range" class="form-control input-sm input-field">
        </div>
        <div class="col-md-2">
          to
        </div>
        <div class="col-md-3">
          <input type="text" id="range2" class="form-control input-sm input-field">
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="form-group">
        <label for="ip" class="col-md-4 label-size">IP</label>
        <div class="col-md-8">
          <input type="text" id="ip" class="form-control input-sm input-field">
        </div>
      </div>
    </div>


    <div class="col-xs-10 ">
      <div class="form-group ">
        <div class="col-xs-4">
          <button class="btn btn-xs" type="button">Start</button>

        </div>

        <label class="col-xs-2 label-size">Order</label>

        <div class="radio" class="col-xs-4 label-size">

          <label>
            <input type="radio" name="order3">order3</label>
          <label>
            <input type="radio" name="order4">order4</label>

        </div>
      </div>

    </div>
 




</form>

</div>

非常感谢任何帮助。

Answer 1

我对您的代码做了一些格式更改，看看这是否满足您的需求。
http://jsfiddle.net/ayang10/sbcobqz9/66/

.form-horizontal .control-label {
  text-align: right;
  margin-bottom: 0;
  padding-top: 7px;
}

应该修正你的格式/对齐方式