Question

我尝试连续设置一个包含两个窄选项的表单，并希望选择保留在两列中。无论我尝试什么，他们总是选择堆叠在移动尺寸显示器上。如何强制它们不叠加并留在两列？

<div class="two fields">
  <div class="field">
    <div class="ui sub header">County</div>
    <select class="ui  dropdown" v-model="district" v-on="change: selectCity" >
        <option></option>
        <option v-repeat="districts" value="{{district}}">{{district}}</option>
    </select>
  </div>

  <div class="field">
    <div class="ui sub header">City <span class="ms">(select county first)</span></div>
    <select class="ui  dropdown" v-model="map_area" v-on="change: clearFoundCt">
        <option></option>
        <option v-repeat="cities" value="{{map_area}}">{{map_area |   trimcity}}</option>
    </select>
  </div>
</div>

Answer 1

我不确定你是否已经弄清楚了这一点，但是尝试将它们放入网格类并使用加倍。

以下是文档页面here

的摘录

<div class="ui grid">
    <div class="doubling two column row">
        <div class="column">foo</div>
        <div class="column">bar</div>
    </div>
</div>

如果这不起作用，试试这个

<div class="ui two column grid">
   <div class="column">foo</div>
   <div class="column">bar</div> 
</div>

该文档包含有关如何确定移动界面最终结果的网格数量的响应式模式指南。

我希望这会有所帮助。

<强>更新

所以我只是尝试了这个并且它有效

<div class="ui two column grid form">
    <div class="column two field">
       <input type="text" name="first-name" placeholder="First Name">
    </div>
    <div class="column two  field">
       <input type="text" name="last-name" placeholder="Last Name">
    </div>
</div>

不确定这是不是你想要的。

哦，我也无法让第一个例子与doubling two column一起正常工作，但是如果你使用<div class="doubling four column row">，你基本上会得到这样的东西

平板电脑/显示器

 ______ ______ ____________
|      |      |            |
|  foo | bar  |            |
____________________________

这适用于移动设备

 _____________ _____________
|             |             |
|     foo     |     bar     |
____________________________

因为你可以看到它有效，但显示器在显示器和平板电脑上并不优雅。

语义UI强制表单字段在电话显示屏上显示两列2列

1 个答案: