ボタンは、私はそれがあるべきようで、このようになりますフォーム（ビッグデバイス上で、例えばPCモニタ）</p> <p><a href="https://i.stack.imgur.com/FiEyt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FiEyt.png" alt="Screenshot"></a></p> <p>を持っているより小さなデバイス

Question

にインライン化ではありません。

ボタンは入力と同じラインでなくなりました：小さなデバイス上では、しかし、このようになります。私のコードは次のようになります：

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

小さなデバイスを使用するとき、どうやって正しく配置されるようにするには？ PS：ブートストラップが使用されています

Answer 1

あなたの列はcol-mdです。つまり、画面の幅が992pxを下回ると、列はページの全幅を占めます。したがって、インラインのままにしたい場合は、必要な列サイズのクラスcol-xsを追加してください。

<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

表示に設定する両方の入力とボタン必要：インライン、それらは同じ列に配置されなければなりません。そして作品の下にあなたのニーズを満たす必要があります。

<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

あなたは、ブートストラップCOLクラスをスタッキングしたことがありますか？

lg/md/smは、すべて異なる画面サイズしきい値を対象としています。倍数を使用すると、特定のシナリオで使用する領域を定義するのに役立ちます。私はあなたがその入力からいくつかの不動産を盗むことができると言います。

また、同じdivに入れることもできます。積み重ねられたCOLクラスで修飾し

あなたのコード：

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