如何防止文本frm与输入字段重叠?

时间:2017-06-06 01:47:47

标签: html css

我希望在大屏幕上查看时可以构建一个包含两列的表单,并且在较小的屏幕(如手机)上查看时会变为一列。

我的方法如下。当我在全屏显示在桌面上时它看起来很好。当我用非常窄的屏幕在桌面上显示它时,它看起来也很好;表格减少到一列。但是,在大小之间的路上,当标签(“语言”)与选择字段重叠时,有一些宽度。

我可以以某种方式阻止这种情况吗?

提前致谢!

<form class="form-horizontal" action="/action_page.php">

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Language:</label>
          <div class="col-sm-10">
            <select class="form-control" name="language" id="language">
                <option value="none">(no restriction)</option>
                <option value="Deutsch">German</option>
                <option value="Englisch">English</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Language2:</label>
          <div class="col-sm-10">          
            <select class="form-control" name="language" id="language">
                <option value="none">(no restriction)</option>
                <option value="Deutsch">German</option>
                <option value="Englisch">English</option>
            </select>
          </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
          <label class="control-label col-sm-2" for="email">Language:</label>
          <div class="col-sm-10">
            <select class="form-control" name="language" id="language">
                <option value="none">(no restriction)</option>
                <option value="Deutsch">German</option>
                <option value="Englisch">English</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="pwd">Language2:</label>
          <div class="col-sm-10">          
            <select class="form-control" name="language" id="language">
                <option value="none">(no restriction)</option>
                <option value="Deutsch">German</option>
                <option value="Englisch">English</option>
            </select>
          </div>
        </div>  
    </div>
</div>

</form>

0 个答案:

没有答案