在引導

輸入和按鍵之間添加空間我使用引導3，並有此HTML：在引導

<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

我想最後的按鈕，走垂直從input-group DIV間隔和不接觸它。

我發現使用形式的例子有隔開按鈕：fiddle

，這是我多麼希望我的按鈕。我怎麼弄到的？

來源

2014-09-23 Sam Holder

簡單地將每一對<label>和<div class="input-group">由具有.form-group類別的<div>包裝。 （如果需要這樣或者只是包裝的最後一對）

的原因是Twitter的引導應用的15px一個margin-bottom到.form-group。您也可以通過給<button>設置一個頂部邊距或給最後一個輸入一個底部邊距來手動執行此操作。

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>

來源

2014-09-23 22:46:34

謝謝！我會在早上起牀時接受，因爲此刻需要等待。 – 2014-09-23 22:50:19

回答

相關問題