ブートストラップの列内のコントロールを整列する方法は？

Question

ここに私のコードです。

<div class="col-lg-4"> 
    <label>ID Expire</label> 
    <div class="row "> 
    <div class="col-lg-5"> 
     <input type="text" class="form-control input-sm" id="TextIDExpire" /> 
    </div> 
    <div class="col-sm-4"> 
     <button class="btn btn-default form-control " id="BtnBrowsePhoto"> Browse <i class="glyphicon glyphicon-folder-open"></i> </button> 
    </div> 
    <div class="col-lg-3"> 
     <button class="btn bg-yellow form-control" id=" btnviewphoto"> View <i class="glyphicon glyphicon-eye-open"></i> </button> 
    </div> 
    </div> 
</div> 

の予想される出力は

ですが、私は私がやりたいcontrols.Whatの間に大きな空白を得ました。助けてください

Answer 1

イメージは非常に簡単です、ブートストラップは2つのクラスとtext-centerが付属していますので、あなたのイメージがBLOCKの場合は使用してください。 imgにimg-responsiveクラスを追加してimgをブロック要素にする場合は、Webコンソール内をナビゲートし、要素に適用されたスタイルを表示する方法が分かっている場合は、これを知っておく必要があります。

クラスを使用したくない場合は、ここではCSSブートストラップが使用します。あなたはクラスタスを作成したり、要素のCSSルールをブートストラップクラスと一致させることができます。

// in case your dealing with a block element apply this to the element itself 
.center-block { 
    margin-left:auto; 
    margin-right:auto; 
    display:center; 
} 
// in case your dealing with a inline element apply this to the parent 
.text-center { 
    text-align:center 
}