在桌面和移动版本中并排制作容器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>