有點複雜自舉響應COL-佈局

我有一個盒內三個要素：有點複雜自舉響應COL-佈局

1）下拉（左）

2）searchfield和一個按鈕（下拉後右）

3）「新文章」按鈕（右側）

在桌面上，一切看起來像它應該（一切是很好的對準旁邊的海誓山盟）..

但在移動（COL-SM和低級）我試圖完成下列工作：

1）下拉（左）

2）searchfield和按鈕（左下拉下方）

3）右上方的「新文章」按鈕

現在已經搜索了很長時間，並且一直未能找到解決方案。

這裏是我的代碼，到目前爲止，這..不起作用：

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

任何人都可以糾正這個，好讓我可以讓我這麼久期望的結果？

來源

2016-10-10 Terje Nygård

瞭解您當前正在經歷的事情會非常有幫助。我可以肯定的一件事是，由於xs-6列的大小，您的下拉菜單和搜索欄在技術上應該始終位於xs大小的同一行。一列是12塊。 6 + 6 = 1行。標準bootstrap文檔應該給你一些關於他們的網格如何工作的好信息http://getbootstrap.com/css/#grid –

您試圖在移動設備上實現的內容需要更改元素的順序。你有兩個選擇來實現這個目標;（a）使用javascript命令元素，（b）使用引導程序的推拉類。您可以更改訂單，例如，col-md-pull -4。

來源

2016-10-11 20:03:39

Voila！.. ofcourse！...只讀了拉和推（我沒有以前使用過），它給了我新的見解，如何將其取消:)謝謝... –

是的，推/拉在bootstrap的文檔中沒有突出顯示。祝你好運 ;） –

有點複雜自舉響應COL-佈局

回答

相關問題