Question

我有三个表单元素，但我似乎无法将它们全部串联在一起。如果我选择其中两个，它们可以工作，但只要有三个，它们就会失去对齐。请注意，下拉列表是一个asp:dropdownlist控件，因此我将生成的html源代替，并将值替换为1,2,3以便于阅读。

请参阅JSfiddle here。

代码以防您无法访问JSfiddle：

    <form class="form-inline" role="form" runat="server">
        <div class="form-group">
            <div class="row">
                <div class="col-lg-12">
                <div class="input-group input-group-lg">
                    <select name="ctl00$ContentPlaceHolder1$ddreg" id="ContentPlaceHolder1_ddreg" class="form-control input-lg">
    <option value="0">&lt;Select Number&gt;</option>
    <option value="2">1</option>
    <option value="1">2</option>
    <option value="3">3</option>

</select>
                    <input type="text" class="form-control input-lg" id="comments" placeholder="Enter any comments..." />
                    <span class="input-group-btn">
                    <button class="btn btn-default btn-lg" type="submit">Add</button>
                    </span>
                </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div>
    </form>

如何在同一行内以100％宽度将它们全部内联？

Answer 1

你需要使用像xs-* md-* lg-*这样的引导程序的网格来使列内联，我已经做了一些改动。看看吧。 JSFiddle

Bootstrap表单元素不会内联

1 个答案: