控制和下拉列表后的bootstrap图像？

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">类来获取您想要的布局

e.g。

<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/