Bootstrap 3-间距问题

Question

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

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

2. 我想摆脱2场之间的垂直空间。例如，作者和知识产权领域之间有一个空间。我希望他们一起关闭。再次，无法弄清原因。

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> 
 
\t \t \t <option>1</option> 
 
\t \t \t <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

我对你的code做了一些格式修改，看看这是否能解决你的需求。
http://jsfiddle.net/ayang10/sbcobqz9/66/

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

应解决您的格式/对齐