Bootstrap 伝票明細の入力　その5

方法としては
・グリッドの利用
・formグループの利用
・テーブルの利用
を検討した

テーブルでうまく行きそうだが
<table class="table table-striped table-bordered table-hover">
<form>
 <thead>
  <tr  class ="table-primary">
   <th style="width: 8%">cd</th>
   <th style="width: 8%">*</th>
   <th style="width: 24%">na</th>
   <th style="width: 8%">su</th>
   <th style="width: 8%">tan</th>
   <th style="width: 8%">kin</th>
   <th style="width: 8%">zkbn</th>
   <th style="width: 4%">so</th>
   <th style="width: 4%">t1</th>
   <th style="width: 4%">t2</th>
   <th style="width: 4%">t3</th>
   <th style="width: 12%">biko</th>   
  </tr>
 </thead> 
で見出しは配分してくれるが
<tr>
  <td ><input type="text" name="cd"   value ="cd"></td>
で画面が右に広がる　
<tr>
  <td ><input type="text" name="cd"   size="10" value ="cd"></td>
とサイズをいれても同じ
基本色々とテストしがたテーブルではできないようである

・次に王道として　form-inline　form-group　form-control
の利用だが右端からきっちりと表示してくれる
<form class="form-inline">
 <div class="form-group">
  <input type="text" name="cd"  class="form-control" size ="10" value ="cd">
 </div>
 <div class="form-group"> 
        <input type="submit" name ="serch" value ="表示"  class="form-control btn btn-primary  btn-sm">  
 </div>
 <div class="form-group">
  <input type="text" name="na" class="form-control"  size ="30" value ="na">
 </div>
 <div class="form-group"> 
  <input type="submit" name ="serch" value ="一覧"  class="form-control btn btn-primary  btn-sm"> 
 </div>
 <div class="form-group">
  <input type="text" name="bsu" class="form-control"  size ="10" value ="iri">
 </div>

・次に
<div class="container">
   <div class ="row bg-info text-white">
のである

１２列内に列の追加が可能で使いやすいのでこれを使う事に


ソースは次のブログで