Warum sieht mein Webformular mit Bootstrap nicht gut aus mit der Klasse form-inline in phone?

Question

Ich habe ein Webformular in ASP.NET mit VB.NET, es ist mit Bootstrap gemacht, aber wenn ich 3 Elemente (eine Dropdownliste mit selectpicker Klasse, ein Textfeld und eine Schaltfläche) in class = "form-inline" auf dem PC sieht in Telefon gut, aber nicht: Form-inline on PC

aber in Telefon ist es dies wie folgt aussehen: Form-inline on Phone

Hier ist meine aspx:

  <div class="panel panel-default"> 
     <div class="panel-heading">Directorio Telefónico</div> 
     <div class="panel-body"> 
      <div class="form-group"> 
      <div class="form-inline col-lg-offset-3 col-sm-offset-3"> 
       <asp:DropDownList ID="ddlBuscar" CssClass="selectpicker" runat="server"> 
        <asp:ListItem Value="">Seleccione elemento</asp:ListItem> 
        <asp:ListItem Value="departamento">Departamento</asp:ListItem> 
        <asp:ListItem Value="ubicacion">Ubicaci&#243;n</asp:ListItem> 
        <asp:ListItem Value="extension">Num. extensi&#243;n</asp:ListItem> 
        <asp:ListItem Value="usuario">Nombre usuario</asp:ListItem> 
        <asp:ListItem Value="apellidop">Apellido p. usuario</asp:ListItem> 
        <asp:ListItem Value="apellidom">Apellido m. usuario</asp:ListItem> 
        <asp:ListItem Value="linea">Tipo de l&#237;nea</asp:ListItem> 
       </asp:DropDownList> 

         <div class="input-group"> 
        <span class="input-group-addon"> 
         <i class="glyphicon glyphicon-search"></i> 
         </span> 
        <asp:TextBox ID="txtBuscar" placeholder="Ingrese búsqueda" CssClass="form-control " runat="server" ClientIDMode="Static" onkeypress="return EnterEvent(event)"></asp:TextBox> 
          </div> 
       <asp:LinkButton ID="loading" CssClass="btn btn-default" runat="server" OnClientClick="waitingDialog.show('Procesando búsqueda, espere...', {onHide: function Carga(){ var objO = document.getElementByid('<%=loading.ClientID %>'); objO.click();}})" Text="<i aria-hidden='true' class='glyphicon glyphicon-search'></i> Buscar"></asp:LinkButton> 

      </div> 
      </div> 

Vielen Dank für Ihre Hilfe

Answer 1

Bitte lesen Sie die documentation auf Bootstrap der Inline-Form:

hinzufügen .form-inline zum Formular für linksbündig (die kein zu sein braucht) und Inline-Block-Steuerelemente. Dies gilt nur für Formulare in Ansichtsfenstern, die mindestens 768 Pixel breit sind.

Sie können den Formularsteuerelementen etwas Marge hinzufügen, damit sie auf mobilen Geräten besser gestapelt werden.