выпадающее выравнивание twitter bootstrap 3.0

Question

Как вывести/выровнять два выпадающего списка? Из-за ярлыков он не идеально выровнен. Я хочу, чтобы оба текстовых поля были идеально выровнены. Благодаря!

<div class="form-inline"> 
    <asp:Label ID="Label2" runat="server" Text="Profession:"></asp:Label> 
    <asp:DropDownList ID="ddTalent" runat="server" CssClass="form-control"> 
     <asp:ListItem>Model</asp:ListItem> 
     <asp:ListItem>Photographer</asp:ListItem> 
     <asp:ListItem>Designer</asp:ListItem> 
     <asp:ListItem>Fashion Stylist</asp:ListItem> 
     <asp:ListItem>Hair Stylist</asp:ListItem> 
     <asp:ListItem>Make-up Artist</asp:ListItem> 
    </asp:DropDownList> 
</div> 
<br /> 
<div class="form-inline"> 
    <asp:Label ID="Label3" runat="server" Text="Gender:"></asp:Label> 
    <asp:DropDownList ID="ddGender" runat="server" CssClass="form-control"> 
     <asp:ListItem>Male</asp:ListItem> 
     <asp:ListItem>Female</asp:ListItem> 
     <asp:ListItem>Any</asp:ListItem> 
    </asp:DropDownList> 
</div> 

UPDATE:

Я хочу, чтобы это было так: http://i.imgur.com/e4ZS1tM.jpg

Answer 1

Создание ярлыка на этикетке должно правильно выравнивать ваши элементы.

Answer 2

вы можете использовать стиль Атрибут (инкремент или декремент пиксельный размер для регулировки)

<asp:DropDownList ID="ddGender" runat="server" CssClass="form-control" style="margin-left:3px">