ブートストラップ3ボタン/ラベルなしのテキストボックスの縦の整列

Question

ブートストラップ3を使用して、垂直に整列させ、列の上にラベルがないときにボタンを下部に置く方法は？

このような状況のように：https://jsfiddle.net/luancaius/7ygoys11/のような2行（ラベル用とテキストボックスとボタンに1つ）を使用して

1. ：

   <div class="container"> 
       <div class="row"> 
        <div class="col-xs-3"> 
         <label class="control-label">Field 1</label> 
         <input type="text" class="form-control"> 
        </div> 
        <div class="col-xs-3 "> 
         <div class="text-center">     
          <button class="btn btn-primary">Swap!</button> 
         </div> 
        </div> 
        <div class="col-xs-3"> 
         <label class="control-label">Field 2</label> 
         <input type="text" class="form-control"> 
        </div> 
       </div> 
   </div> 
   

   私は主に3つのソリューションを使用していました。この解決策は反応せず、レイアウトの問題がいくつか発生します。

2. 中央の欄に余白部分を使用します。また、応答の問題があります。
3. 問題を修正する非改行スペースのラベルを使用していますが、見栄えが良くありません。これは私の現在の解決策です。 https://jsfiddle.net/luancaius/mr5wLoxf/

これを改善する方法はありますか？あるいは、私はレイアウト構造を間違っているのですか？

ありがとうございます！

Answer 1

あなたは垂直整列で揃えてみてくださいすることができます

.col-xs-3 {display:inline-block; vertical-align:bottom; float:none;} 

念COL-XS-3のdivのそれぞれの間にHTMLにスペースが含まれていないします。

<div>...</div><!-- space --><div>...</div> 

https://jsfiddle.net/yw0a6689/

UPDATE：

.container > .row > div {display:inline-block; vertical-align:bottom; float:none;} 

：代わりの列ごとにこれをやって、あなたはこのように、一般的にそれを行うことができますか、このように、それらを分割するコメントを使用より具体的には、行に.myrowのようなクラスを与え、次に宣言することによって具体的になります。

.myrow > div {display:inline-block; vertical-align:bottom; float:none;}