2つのasp.netテキストボックスをBootstrapでお互いに整列させる方法はありますか？

Question

私は、アカウントの下の2つのテキストボックスを水平に揃えたいと思っています。私は異なる量の列を使用しようとしましたが、互いの上に積み重ねられないように変更することはできません。私はプロトタイプへのリンクを持っていて、テキストボックスをどのように見たいのかをAdobe Xdにすばやく伝えました。

これは私が持っているものです。

これは私がそれを見えるようにしたいものです。

これが今

私が持っているコードです。

<div class="form-group"> 
 
    <asp:Label ID="lblwk_num" runat="server" AssociatedControlID="txtwk_num" Text="Work Order #" CssClass=""></asp:Label> 
 
    <asp:TextBox ID="txtwk_num" runat="server" ReadOnly="True" CssClass="form-control" Enabled="False"></asp:TextBox> 
 
</div> 
 

 
<div class ="form-group"> 
 
    <asp:Label ID="lblwk_acct" runat="server" AssociatedControlID="txtwk_acct" Text="Account" ></asp:Label> 
 
    <asp:TextBox ID="txtwk_acct" ReadOnly="True" Enabled="False" CssClass="form-control" runat="server" ></asp:TextBox> 
 
    <asp:TextBox ID="txtwk_suffix" runat="server" CssClass="form-control" ReadOnly="True" Enabled="False"></asp:TextBox> 
 
</div>

Answer 1

私はフォームインラインクラスを使用して、テキストボックスを並べて表示しました。付属のサンプル出力を探します。それがあなたのために働く場合、私の答えを受け入れます。

しかし、より良い方法があるかもしれません。見つけたらここに投稿します。

<div class="form-group"> 
    <asp:Label ID="lblwk_num" runat="server" AssociatedControlID="txtwk_num" Text="Work Order #" CssClass=""></asp:Label> 
    <asp:TextBox ID="txtwk_num" runat="server" ReadOnly="True" CssClass="form-control" Enabled="False"></asp:TextBox> 
</div> 

    <asp:Label ID="lblwk_acct" runat="server" AssociatedControlID="txtwk_acct" Text="Account" ></asp:Label> 
<div class="form-inline"> 
     <div class="form-group"> 
    <asp:TextBox ID="txtwk_acct" ReadOnly="True" Enabled="False" CssClass="form-control" runat="server" ></asp:TextBox> 
     </div> 
     <div class="form-group"> 
    <asp:TextBox ID="txtwk_suffix" runat="server" CssClass="form-control" ReadOnly="True" Enabled="False"></asp:TextBox> 
     </div> 
    </div>