html - 有点复杂的 bootstrap 响应式 col-layout

Question

我在一个盒子里有三个元素:

1) 下拉菜单(左)

2) 一个搜索字段和一个按钮(就在下拉列表之后)

3) “新文章”按钮(右侧)

在桌面上，一切看起来都应该如此(一切都很好地彼此对齐)..

但在移动设备上(col-sm 和更低版本)我正在尝试完成以下任务:

1) 下拉菜单(左)

2) 搜索字段和按钮(位于下拉菜单下方)

3) 右上角的“新文章”按钮

Google 了很久，没找到解决办法。

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

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