刪除額外的空間在一個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/