Question

我正在努力实现这个目标：

但是我尝试了许多事情仍然不能。我的结果如下：

这是我的ASP.NET代码：

<div class="row">
            <div class="form-group-sm  col-sm-4">
                <asp:Label runat="server" Text="PD Number"></asp:Label>
            </div>
            <div class="form-group-sm  col-sm-4">                                                            
                <div class="form-control-inline"><asp:TextBox ID="txtPDNumber1" runat="server" CssClass="form-control  input-sm"></asp:TextBox></div>
                <div class="form-control-inline"> <asp:TextBox ID="txtPDNumber2" CssClass="form-control input-xs" runat="server"></asp:TextBox></div>                        
                <div class="form-control-inline"> <asp:TextBox ID="txtPDNumber3" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
            </div>
        </div>

在页面顶部我有：

<style>
    .form-control-inline {
        position: relative !important;
        display: inline !important;
        width: 30% !important;
    }
</style>

这里呈现的是html：

                    <span>PD Number</span>
            </div>
            <div class="form-group-sm  col-sm-4">                                                            
                <div class="form-control-inline"><input name="ctl00$MainContent$txtADNumber1" type="text" value="34" id="MainContent_txtAPDNumber1" class="form-control  input-sm" /></div>
                <div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber2" type="text" id="MainContent_txtPDNumber2" class="form-control input-xs" /></div>                        
                <div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber3" type="text" id="MainContent_txtPDNumber3" class="form-control input-sm" /></div>
            </div>
        </div>

如何调整以使其内联。同时调整文本框的宽度。

Answer 1

您是否尝试过使用bootstrap网格？像这样：

  <div class="row">
     <div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber1"></div>
     <div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber2"></div>
     <div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber3"></div>
 </div>

Answer 2

在Bootstrap 3和Bootstrap 4中，您可以添加一个名为form的{{1}}元素的类，该元素会将您的form-inline元素放在同一行。很难从提供的代码中确定，但是使用input标记包装输入元素并添加form类，您可能会获得所需的输出。

注意：当达到响应断点时，这些元素将显示在它们自己的行上。

https://codepen.io/cowanjt/pen/QMZQjv ...这将显示代码不作为。

form-inline

bootstrap使3个文本框内联

2 个答案: