在桌面和移動版本中並排製作容器Bootstrap

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表示「x列在屏幕尺寸中等或更大」，手機屏幕小於中等，並且您沒有指定佈局應如何顯示，因此它默認爲12列。使用col-xs-6使其在6列上的超小屏幕和更大的屏幕。

另外請記住，如果沒有包含在「行」中，「col」類可能無法正常工作，所以我建議在卡上添加一行。

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