余分な空白を削除するには、boostrap css

Question

フォームグループには2つの要素があります。もう1つはボタンですが、ボタンとラベルの間に余分なスペースがあります。 このフィドルを見てください。私が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を削除したいmyFiddle

もこの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があります。使用：

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

などがあります。これに関するあなたのご意見をお聞かせください。ありがとう！ブートストラップ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); 
 
} 
 
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

デフォルトのマージンによって、あなたはこれを削除必要があるので、ラベルのためにそこにあります。

working demo

label{margin-bottom:0} 

Answer 4

あなたはCSSでこれを行うことができます。 HTML

.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; 
} 

： "ドキュメントタイプ" ラベルにIDやクラスを追加し、0

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 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/