asp.net-mvc - 控制和下拉列表后的引导图像？

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 - 在水平表单下，我相信你需要将每个标签和控件包装在 a 中<div class="control-group">，并给你的表单一个类<form class="form-horizontal">来获取你想要的布局

例如

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

查看我对 Fiddle 的更新http://jsfiddle.net/FZZsu/2/