Bootstrap表單列與非表單列不對齊？

我有這樣的代碼（jsfiddle - 確保你伸展「演示」框架足夠的按鈕是在同一行）：Bootstrap表單列與非表單列不對齊？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UI-Compatible" content="IE=edge /"> 
    <meta name="viewport" content="width=device-width, initial-scale=1 /"> 


    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

</head> 

<body> 
    <div class="container"> 

    <br/><br/><br/> 

    <div class="row">   

     <form class="form-horizontal" role="form"> 
     <div class="form-group"> 


      <label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label> 

      <div class="col-sm-4"> 
      <select class="form-control" id="pfSel"></select> 
      </div> 

      <label for="pidSel" class="col-sm-2 control-label">Select PID:</label>    

      <div class="col-sm-4"> 
      <select class="form-control" id="pidSel"></select> 
      </div> 

     </div> 
     </form> 

    </div>  

    <div class="row"> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
    </div> 

    </div> 

</body>

第一行是一個形式，而第二行是外面的按鈕表格以指示列的位置。正如你所看到的，表單中的選擇下拉菜單與下面的按鈕不一致。下拉式左邊框與按鈕的關係不同。爲什麼會發生這種情況，有什麼方法可以解決這個問題？謝謝。

來源

2016-04-27 jazzblue

.row元素添加負邊距來說明Bootstrap的.col-*定義中使用的填充。 .form-horizontal表單也會這樣做，因此您不應將<form>元素包裝在<div class="row">之內。

更新你的標記如下：

<div class="container">  
     <form class="form-horizontal" role="form"> 
     <div class="form-group"> 
      <label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label> 
      <div class="col-sm-4"> 
       <select class="form-control" id="pfSel"></select> 
      </div> 

      <label for="pidSel" class="col-sm-2 control-label">Select PID:</label>    
      <div class="col-sm-4"> 
       <select class="form-control" id="pidSel"></select> 
      </div> 
     </div> 
    </form> 

    <div class="row"> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
     <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> 
    </div> 
</div>

此外，使用margin或類似的CSS屬性添加空格，不<br />標籤。

jsFiddle Demo

來源

2016-04-27 17:01:52 BenM

Bootstrap表單列與非表單列不對齊？

回答

相關問題