Knopf nicht auf kleinere Geräte inlined

Question

Ich habe ein Formular, das wie folgt aussieht (auf einem großen Gerät, beispielsweise PC-Monitor)

, die, wie es ist sein sollte. Bei kleineren Geräten sieht es jedoch so aus:

die Taste ist nicht mehr in der gleichen Zeile wie die Eingabe. Mein Code sieht wie folgt aus:

<div class="form-group "> 
    <label class="col-md-2 control-label">Title</label> 
    <div class="col-md-10"> 
     <div class="row"> 
      <div class="col-md-10"> 
       <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value=""> 
      </div> 
      <div class="col-md-2"> 
       <a id="btn-verify" class="btn btn-primary pull-right">Verify</a> 
      </div> 
     </div> 
    </div> 
</div> 

Wie kann ich sicherstellen, dass es auch richtig ausgerichtet ist, wenn kleinere Geräte verwendet? PS: Bootstrap wird verwendet

Answer 1

Ihre Spalten sind col-md, was bedeutet, dass die Spalten die volle Breite der Seite einnehmen, wenn die Bildschirmbreite 992px unterschreitet. Wenn Sie also möchten, dass sie inline bleiben, fügen Sie col-xs Klassen mit den benötigten Spaltengrößen hinzu.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group "> 
 
    <label class="col-md-2 control-label">Title</label> 
 
    <div class="col-md-10"> 
 
     <div class="row"> 
 
      <div class="col-xs-10"> 
 
       <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value=""> 
 
      </div> 
 
      <div class="col-xs-2"> 
 
       <a id="btn-verify" class="btn btn-primary pull-right">Verify</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Sowohl die Ein- und Taste müssen, um Display eingestellt werden: inline, und sie sollten in der gleichen Spalte platziert werden.

<div class="form-group "> 
 
    <label class="col-md-2 control-label">Title</label> 
 
    <div class="col-md-10"> 
 
     <div class="row"> 
 
      <div class="col-md"> 
 
       <input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value=""> 
 
       <a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Haben Sie versucht, das Stapeln der Bootstrap-col Klassen: Unter Arbeiten und sollte Ihre Bedürfnisse befriedigen?

Die lg/md/sm alle Ziel unterschiedliche Bildschirmgröße Schwellenwerte. Die Verwendung von Vielfachen sollte Ihnen helfen, den Platz zu definieren, den es in einem gegebenen Szenario einnehmen sollte. Ich würde sagen, Sie können etwas Immobilien aus diesem Eingang stehlen.

Sie könnten auch in Betracht ziehen, sie in das gleiche div.

Ihr Code mit gestapelten col Klassen geändert:

<div class="form-group "> 
    <label class="col-md-2 control-label">Title</label> 
    <div class="col-md-10"> 
     <div class="row"> 
      <div class="col-md-10 col-sm-6"> 
       <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value=""> 
      </div> 
      <div class="col-md-2 col-sm-6"> 
       <a id="btn-verify" class="btn btn-primary pull-right">Verify</a> 
      </div> 
     </div> 
    </div> 
</div>