如何使用Bootstrap将两个asp.net文本框彼此对齐？

Question

我想让Account下方的两个文本框水平对齐。我已经尝试过使用不同数量的列，但我似乎无法让它们从堆叠在彼此之上。我有一个原型的链接，我很快就把它变成了我想要文本框看起来的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

我使用了form-inline类，并且我得到了文本框。找到附加的示例输出。如果它适合你，请接受我的回答。

然而，可能有更好的方法。如果我找到了，我会在这里发帖。

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