控件和下拉列表後的引導圖像？

Question

我正在試圖對齊引導文本框控件和圖像對齊到center，我不知道使用哪個css class？

也引導下拉菜單也調整錯誤，當我第一次加載它顯示交叉後點擊它顯示正確的箭頭。但仍然在頂部。

@Html.LabelFor(model => model.Committee.Type, new { @class = "control-label"}) 
    <div class="controls"> 
     @Html.TextBoxFor(model => model.Committee.Type, new { @readonly = "readonly", @class = "input-xlarge" }) 
     <a class="btn-link" href="#" rel="popover" data-title="Activity Type" data-content="Did we do a good job?" >   
      <img src="~/Content/glyphicons_195_circle_info.png" class="img-rounded" alt="Activity Type" /></a> 
    </div> 
@Html.LabelFor(model => model.Role, new { @class = "control-label" }) 
    <div class="controls"> 
     @Html.DropDownList("Role",(SelectList)ViewBag.Roles , new { @class =input-xlarge" }) 
     <img src="~/Content/glyphicons_195_circle_info.png" class="img-circle" alt="Activity Role" title="Activity Role"/> 
      @Html.ValidationMessageFor(model => model.Role) 
    </div> 

JS

$('#Role').combobox(); 

Answer 1

看一看http://twitter.github.io/bootstrap/base-css.html#forms - 下臥式形式，我認爲，你需要用一個<div class="control-group">每個標籤和控制，給你的表格類<form class="form-horizontal">得到你想要的佈局

eg

<form class="form-horizontal"> 
    <div class="control-group"> 
     @Html.LabelFor(model => model.Committee.Type, new { @class = "control-label"}) 
     <div class="controls"> 
      @Html.TextBoxFor(model => model.Committee.Type, new { @readonly = "readonly", @class = "input-xlarge" }) 
      <a class="btn-link" href="#" rel="popover" data-title="Activity Type" data-content="Did we do a good job?" >   
       <img src="~/Content/glyphicons_195_circle_info.png" class="img-rounded" alt="Activity Type" /></a> 
     </div> 
    </div> 
</form> 

看到我更新了自己的小提琴http://jsfiddle.net/FZZsu/2/