2014-09-23 33 views
8

yılında girdi ve düğme arasındaki boşluğu ekleyin ve bu HTML vardır: Ben önyükleme 3 kullanıyorum bootstrap

fiddle

<body> 
    <div class="container body-content"> 
     <div class="row"> 
      <div class="col-lg-6"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div> 
       <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button> 
      </div> 
     </div> 
    </div> 
</body> 
Final düğmesi input-group div uzak dikey aralıklı ve dokunmayacağım olmak istiyorum o.

Bir formu kullanarak bulundu örneği aralıklı düğmesi vardır: fiddle

ve bu benim düğmeye istiyorum nasıl. Bunu nasıl alabilirim?

cevap

13

<label> ve <div class="input-group">'un her bir çiftini.form-group sınıfına sahip olacaksınız.

nedeni twitter önyükleme .form-group için 15px bir margin-bottom geçerli olmasıdır (böylece gerekirse Ya da sadece son çifti sarın). Bunu, <button> bir üst kenar boşluğuna vererek veya son girişi bir alt kenar boşluğuna vererek elle de yapabilirsiniz.

EXAMPLE HERE

<div class="container body-content"> 
    <div class="row"> 
     <div class="col-lg-6"> 

      <div class="form-group"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div>      
      </div> 

      <div class="form-group"> 
       <label class="control-label" for="parameterValue">sdsd</label> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." /> 
        <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span> 
       </div>      
      </div> 

      <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button> 

     </div> 
    </div> 
</div> 
+0

teşekkürler! Sabah kalktığımda, şu an beklemek zorunda olduğumu kabul edeceğim. –