以下為使用 form-inline 來達到水平排列內容的範例。


<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <label>手機</label>
	  <div class="form-inline">
	     <asp:TextBox runat="server" class="form-control input-sm required" ID="userPhoneNumberFirstSection" Width="55px" MaxLength="4" placeholder="0000" en />
	     <asp:Label runat="server" Style="font-size: larger" class="text">-</asp:Label>
	     <asp:TextBox runat="server" class="form-control input-sm required" ID="userPhoneNumberSecondSection" Width="45px" MaxLength="3" placeholder="000" />
	     <asp:Label runat="server" Style="font-size: larger" class="text">-</asp:Label>
	     <asp:TextBox runat="server" class="form-control input-sm required" ID="userPhoneNumberThirdSection" Width="45px" MaxLength="3" placeholder="000" />
	   </div>
	 </div>
       </div>
     </div>
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <label>生日</label>
	  <div class="form-inline">
	    <asp:TextBox runat="server" class="form-control input-sm required" ID="userBirthdayYear" Width="55px" MaxLength="4" placeholder="YYYY" />
	    <asp:Label runat="server" Style="font-size: larger" class="text">-</asp:Label>
	    <asp:TextBox runat="server" class="form-control input-sm required" ID="userBirthdayMonth" Width="45px" MaxLength="2" placeholder="MM" />
            <asp:Label runat="server" Style="font-size: larger" class="text">-</asp:Label>
	    <asp:TextBox runat="server" class="form-control input-sm required" ID="userBirthdayDay" Width="45px" MaxLength="2" placeholder="DD" />
	   </div>
	 </div>
       </div>
     </div>
   </div>

效果如下

使用form-inline達到水平排列