Bootstrap3で（5）テキスト入力の行を均等に配置する

Question

私の目標は、ブートストラップの列に5行のテキスト入力を3行並べることです。各テキスト入力は5文字の最大幅（テキスト入力の属性size）を持つ必要があります。

これは私が今持っているものです。スニペットの全ページビューも確認してください。

.inputs { 
 
    border: 1px solid red; 
 
} 
 

 
.stuff { 
 
    border: 1px solid blue; 
 
} 
 

 
.container { 
 
    margin-top: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-4 stuff"></div> 
 
     <div class="col-md-8 col-xs-8 inputs"> 
 
      <div class="row"> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="a" class="control-label">A</label> 
 
        <input type="text" value="1" class="form-control" id="a" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="b" class="control-label">B</label> 
 
        <input type="text" value="2" class="form-control" id="b" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="c" class="control-label">C</label> 
 
        <input type="text" value="3" class="form-control" id="c" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="d" class="control-label">D</label> 
 
        <input type="text" value="4" class="form-control" id="d" size="5" /> 
 
       </div> 
 
       <div class="form-group col-md-2 col-xs-2"> 
 
        <label for="e" class="control-label">E</label> 
 
        <input type="text" value="5" class="form-control" id="e" size="5" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

だから、私は2つの主要な問題直面しています：

1. 入力が均等に配置されていないが、
2. その幅は親コンテナに対して100％なので、sizeの属性値は無視されます。

このタスクを解決するにはどうすればよいですか？

ありがとうございます。

Answer 1

ブートストラップの組み込みプッシュクラスを使用することができます。私の例では、必要に応じて小さい方のサイズを微調整することができます。しかし、私はより多くの列のサイズを設定し、押して、これはあなたが達成したいと思うと信じています。

.inputs { 
 
    border: 1px solid red; 
 
} 
 

 
.stuff { 
 
    border: 1px solid blue; 
 
} 
 

 
.container { 
 
    margin-top: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-xs-4 stuff"></div> 
 
     <div class="col-md-8 col-xs-8 inputs"> 
 
      <div class="row"> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="a" class="control-label">A</label> 
 
        <input type="text" value="1" class="form-control" id="a" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="b" class="control-label">B</label> 
 
        <input type="text" value="2" class="form-control" id="b" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="c" class="control-label">C</label> 
 
        <input type="text" value="3" class="form-control" id="c" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="d" class="control-label">D</label> 
 
        <input type="text" value="4" class="form-control" id="d" size="5" /> 
 
       </div> 
 
       <div class="form-group col-xs-12 col-sm-6 col-lg-push-1 col-lg-2"> 
 
        <label for="e" class="control-label">E</label> 
 
        <input type="text" value="5" class="form-control" id="e" size="5" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>