2014-09-23 4 views
8

ich diese HTML Bootstrap-3 und haben bin mit:space zwischen Eingang und Taste in Bootstrap

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

fiddle

Ich mag die letzte Taste weg vertikal von dem input-group div beabstandet zu sein und nicht zu berühren es.

Ein Beispiel, das ich mit einer Form gefunden hat, die Taste im Abstand heraus: fiddle

und das ist, wie ich meine Taste mag. Wie kann ich das bekommen?

Antwort

13

Einfach jedes Paar <label> und <div class="input-group"> durch eine <div> mit .form-group Klasse wickeln. (Oder wickeln nur das letzte Paar benötigt, wenn so)

Der Grund dafür ist, dass Twitter Bootstrap ein margin-bottom von 15px zu .form-group gilt. Sie können dies auch manuell tun, indem Sie dem <button> einen oberen Rand geben oder dem letzten Eingang einen unteren Rand geben.

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

Dank! Ich werde akzeptieren, wenn ich morgens aufstehe, als ich im Moment warten muss. –