デスクトップとモバイル版のコンテナを並行して作成するブートストラップ

Question

私は作業しているシンプルなプロジェクトですが、私は一部に固執しています。私は2つのドロップダウンメニューを作成しました。私はデスクトップ上にいるときにそれらを並べて表示する必要があります。しかし、私はモバイル版に着くと、それが横並びに見えるようになっています。私は以下のコードの関連するセクションを置いています（あなたは角度のものを無視することができます、私はちょうど今レイアウトに固執しています）。助けてください。

<div class="card"> 
<div class="col-md-6"> 
    <div class="card-heading">Visit/Call Time Spent<sup>*</sup></div> 
    <ul class="card-detail "> 
    <li> 
    <select class="sf1select" 
       id="reportFocusSelect" 
       ng-model="callReport.Duration_of_Visit_Call_mins__c" 
       ng-change="changeDiscussionPointPicklist()" 
       ng-options="t.name for t in timeoptions" ng-required="true"/> 
    </li> 
    </ul> 
    </div> 
    <div class="col-md-6"> 
    <div class="card-heading">Transit to Agency<sup>*</sup></div> 
    <ul class="card-detail "> 
    <li> 
     <select class="sf1select" 
       id="reportFocusSelect" 
       ng-model="callReport.Transit_to_Agency__c" 
       ng-change="changeDiscussionPointPicklist()" 
       ng-options="t.name for t in transitoptions" ng-required="true"/> 
    </li> 
    </ul> 
</div> 

Answer 1

<div class="col-xs-6">の代わり<div class="col-md-6">ありがとうございます。

col-md-xは「画面サイズxx列」を意味します。モバイル画面はメディアよりも小さく、レイアウトの表示方法は指定していないため、デフォルトは12列になります。 col-xs-6を使用してextra small以上のページの6つの欄が表示されます。

「行」に含まれていないと「col」クラスが正しく機能しない可能性があるので、カードに行を追加することをおすすめします。

<div class="card"> 
    <div class="row"> 
    <div class="col-xs-6"> 
     ... 
    </div> 
    <div class="col-xs-6"> 
     ... 
    </div> 
    </div> 
</div>