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>

在桌面和移动版Bootstrap中并排制作容器

1 个答案: