Question

我在框中有三个元素：

1）下拉列表（左）

2）搜索字段和按钮（在下拉列表后面）

3）A＆＃34;新文章＆＃34;按钮（右侧）

在桌面上，一切看起来都应该是这样（一切都很好地在彼此旁边对齐）..

但在移动设备上（col-sm和更低）我试图完成以下操作：

1）下拉（左）

2）搜索字段和按钮（在下拉列表下方）

3）＆＃34;新文章＆＃34;按钮到右上角

现在已经搜索了很长时间，并且无法找到解决方案。

到目前为止，这是我的代码，但是......不起作用：

<div class="input-group">
    <div class="col-sm-10">
        <div class="col-md-12">
            <div class="col-md-12 col-sm-6 col-xs-6">
                <div style="float: left; margin-top: 5px">
                    <p style="color: #666">Nyheter for: &nbsp;</p>
                </div>
                <div style="float: left">
                    <asp:DropDownList runat="server" CssClass="form-control smalltext" Style="height: 30px;" ID="ddlNewsFilter" ItemType="Servicelayer.ClubClassTeam" DataValueField="Id" DataTextField="Name" AutoPostBack="True" AppendDataBoundItems="True">
                        <asp:ListItem Text="- Velg lag -" Value="0" />
                    </asp:DropDownList>
                </div>
            </div>
            <div class="col-md-12 col-sm-6 col-xs-6">
                <div style="float: left">
                    <asp:TextBox runat="server" ID="txtSearch" CssClass="pagemenu-item" placeholder="Søk" />
                </div>
                <div style="float: left">
                    &nbsp;<asp:LinkButton runat="server" ID="btnClearFilter" CssClass="btn btn-default btn-sm" OnClick="btnClearFilter_OnClick">
                <i class="dark fa fa-close"></i>
                    </asp:LinkButton>
                </div>
                <div style="float: left">
                    <asp:Button runat="server" CssClass="item" ID="lnkSearch" Text="Søk" />
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <div style="float: right">
            <asp:LinkButton runat="server" CssClass="item" ID="lnkNewArticle" Text="Ny artikkel" OnClick="lnkNewArticle_Click" Visible="False" />
        </div>
    </div>
</div>

任何人都可以为我纠正这个问题，这样我可以得到我想要的结果吗？

Answer 1

您尝试在移动设备上实现的目标需要更改元素的顺序。你有两个选择来实现这个目标;（a）用javascript命令元素，（b）使用bootstrap的推拉类。您可以更改顺序，例如col-md- pull -4。

有点复杂的bootstrap响应col-layout

1 个答案: