删除额外的空间在一个div后boostrap css

Question

在一个formgroup我有两个元素之一是标签另一个是按钮，但我在按钮和标签之间获得额外的空间。 看到这个小提琴。 myFiddle

我想删除DocumentType之间的空间和附加文件

<div class="panel"> 
    <div class="panel panel-info"> 
     <h3> panel heading</h3> 
    </div> 
    <div class="panel panel-body"> 

    <div class="row"> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <label class="form-control">Document Type</label> 
      <label class="fileUpload"> 
      <input id="documentattachment" name="documentattachment" multiple type="file" /> Attach a file 
      </label> 
     </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <select class="form-control"> 
      <option>One</option> 
      <option>Two</option> 
      <option>Three</option> 
      </select> 
      <div id="submitButton"> 
      <button data-bind="click: submitFile" class="form-control">Send</button> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 

     </div> 
    </div> 
    </div> 
</div> 

感谢

Answer 1

上label &删除margin也删除此fileUpload

label{margin-bottom:0;} 

.fileUpload { 
    -webkit-appearance: none; 
    width: 100%; 
    text-align: center; 
    border: 2px solid #AAA; 
    border-radius: 4px; 
    padding: 2px 5px; 
    /*margin: 2px;*/ 
    background: #f2f2f2; 
    display: inline-block; 
    color: rgba(171, 68, 70, 1); 
} 

https://jsfiddle.net/yx58b5uL/5/

Answer 2

有一个margin-bottom来自bootstrap标签。使用：

label.form-control { 
    margin-bottom: 0px; 
} 

你去了。让我知道你对此的反馈。谢谢！

.fileUpload input[type="file"] { 
 
    position: fixed; 
 
    top: -1000px; 
 
} 
 
.fileUpload { 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    text-align: center; 
 
    border: 2px solid #AAA; 
 
    border-radius: 4px; 
 
    padding: 2px 5px; 
 
    margin: 2px; 
 
    background: #f2f2f2; 
 
    display: inline-block; 
 
    color: rgba(171, 68, 70, 1); 
 
} 
 
.fileUpload:hover { 
 
    background: #CCC; 
 
} 
 
.fileUpload:active { 
 
    background: #CCF; 
 
} 
 
.fileUpload:invalid + span { 
 
    color: rgba(171, 68, 70, 1); 
 
} 
 
.fileUpload:valid + span { 
 
    color: rgba(171, 68, 70, 1); 
 
} 
 
label.form-control { 
 
    margin-bottom: 0px; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"/> 
 
<div class="panel"> 
 
    <div class="panel panel-info"> 
 
    <h3> 
 
    panel heading 
 
    </h3> 
 
    </div> 
 
    <div class="panel panel-body"> 
 

 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <div class="form-group"> 
 
      <label class="form-control">Document Type</label> 
 
      <label class="fileUpload"> 
 
      <input id="documentattachment" name="documentattachment" multiple type="file" />Attach a file 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>One</option> 
 
      <option>Two</option> 
 
      <option>Three</option> 
 
      </select> 
 
      <div id="submitButton"> 
 
      <button data-bind="click: submitFile" class="form-control">Send</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

默认保证金作为引导CSS是有标签，所以你需要删除此。

working demo

label{margin-bottom:0} 

Answer 4

你可以用CSS做到这一点。一个ID或类添加到 “文件类型” 标签，设置margin为0

CSS：

.fileUpload input[type="file"] { 
    position: fixed; 
    top: -1000px; 
} 

.fileUpload { 
    -webkit-appearance: none; 
    width: 100%; 
    text-align: center; 
    border: 2px solid #AAA; 
    border-radius: 4px; 
    padding: 2px 5px; 
    margin: 2px; 
    background: #f2f2f2; 
    display: inline-block; 
    color: rgba(171, 68, 70, 1); 
} 

.fileUpload:hover { 
    background: #CCC; 
} 

.fileUpload:active { 
    background: #CCF; 
} 

.fileUpload:invalid + span { 
    color: rgba(171, 68, 70, 1); 
} 

.fileUpload:valid + span { 
    color: rgba(171, 68, 70, 1); 
} 

#noSpace { 
    margin: 0; 
} 

HTML：

<div class="panel"> 
    <div class="panel panel-info"> 
    <h3> 
    panel heading 
    </h3> 
    </div> 
    <div class="panel panel-body"> 

    <div class="row"> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <label id="noSpace" class="form-control">Document Type</label> 
      <label class="fileUpload"> 
      <input id="documentattachment" name="documentattachment" multiple type="file" /> Attach a file 
      </label> 
     </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <select class="form-control"> 
      <option>One</option> 
      <option>Two</option> 
      <option>Three</option> 
      </select> 
      <div id="submitButton"> 
      <button data-bind="click: submitFile" class="form-control">Send</button> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 

     </div> 
    </div> 
    </div> 
</div> 

你可以看到一个链接到小提琴在这里：https://jsfiddle.net/john_h/yx58b5uL/6/

Answer 5

试试这个：

label { 
    display: inline-block; 
    margin:0px; 
    padding:0px; 
    } 

https://jsfiddle.net/maky/yx58b5uL/9/