Dodaj odstęp między wejściem a przycisk w bootstrap

Używam bootstrap 3 i mieć to HTML:Dodaj odstęp między wejściem a przycisk w 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

chcę ostateczna przycisk, aby być oddalone pionowo od input-group div i nie dotykając to.

Przykładem znalazłem za pomocą formularza posiada przycisk rozstawione na zewnątrz: fiddle

i to jak chciałbym mój przycisk. Jak mogę to zdobyć?

Źródło

2014-09-23 Sam Holder

Po prostu zapakuj każdą parę <label> i <div class="input-group"> według klasy . (lub po prostu zawinąć ostatnią parę razie potrzeby tak)

Powodem jest to, że twitter bootstrap stosuje margin-bottom z 15px do .form-group. Można to również zrobić ręcznie, podając górny margines <button> lub dając ostatnie wejście dolnemu marginesowi.

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>

Źródło

2014-09-23 22:46:34

Dzięki! Przyjmę, kiedy wstaję rano, ponieważ muszę poczekać w tej chwili. –

Dodaj odstęp między wejściem a przycisk w bootstrap

Odpowiedz

Powiązane problemy