语义UI在手机显示屏上强制表单字段两个2列

问题描述：

我试图在一行中设置一个带有两个窄选择项的表单，并希望这些选择项保留在两列中。无论我尝试什么，他们都会选择在手机尺寸显示屏上叠加。我如何强制他们不堆叠并保持两列？语义UI在手机显示屏上强制表单字段两个2列

<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>

答

我不知道你是否已经弄明白了这一点，但尝试把它们放在网格类，并使用加倍。

下面是从文档页面片断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>

该文件包含有关如何确定网格数的响应模式指南你将最终获得移动界面。

我希望这有助于。

UPDATE：

所以我只是想这和它的工作

<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列

相关推荐