2016-04-27 5 views
0

私は(jsfiddle - あなたはボタンが一つのライン上にあることを十分に「デモ」フレームを伸ばすことを確認してください)このコードを持っている:ブートストラップフォームの列が非フォーム列に揃えられていませんか?

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

二行目は外にボタンがありながら、最初の行は次の形式です列がどこにあるかを示すフォーム。表示されているように、フォームの選択ドロップダウンは、その下のボタンと揃っていません。左下のドロップダウンはボタンとの関係が異なります。なぜこれが起こっており、それを修正する方法はありますか?ありがとう。

答えて

1

.row要素は、ブートストラップの.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> 

また、ない<br />タグ、空白を追加するmarginまたは類似のCSSプロパティを使用します。

jsFiddle Demo

関連する問題