Question

我正在使用Boostrap 3 form-horizontal构建一个表单，并使用网格系统col-md-*来保持标签和输入对齐。当浏览器窗口宽度为1200px或更宽时，它会正确显示，但当更少且媒体查询启动时，附加到每个输入的标签会重叠左边的输入，而不是垂直分开或堆叠。

请参阅此笔：https://codepen.io/chrisjbird/pen/XgZmZe

如何阻止它们重叠？

Answer 1

您的TextBox重叠，因此您可以增加textbox的宽度并提供margin:12px

input{
margin :12px;
max-width:100%;  
}

＆＃13;

input{
margin:12px;
max-width:100%;  
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

  <meta name="viewport" content="width=device-width, initial-scale=1">

<body>
<form class="form-horizontal" action="http://mess/cgi-bin/websms/addmsg" target="iframe">
        <div class="form-group">
            <label class="col-md-1" for="username">username:</label>
            <div class="col-md-2">
                <input type="text" id="username" name="username">
            </div>
            <label class="col-md-1" for="password">password:</label>
            <div class="col-md-2">
                <input type="text" id="password" name="password">
            </div>
        </div>
  
  
         <div class="form-group">
            <label class="col-md-1" for="app">app:</label>
            <div class="col-md-2">
                <input type="text" id="app" name="app">
            </div>
            <label class="col-md-1" for="origin">origin:</label>
            <div class="col-md-2">
                <input type="text" id="origin" name="origin">
            </div>
        </div>
  
  
        <div class="form-group">
            <label class="col-md-1" for="sender">sender:</label>
            <div class="col-md-2">
                <input type="text" id="sender" name="sender">
            </div>
            <label class="col-md-1" for="depart">depart:</label>
            <div class="col-md-2">
                <input type="text" id="depart" name="depart">
            </div>
        </div>
  
  
  
        <div class="form-group">
            <label class="col-md-1" for="destno">destno:</label>
            <div class="col-md-2">
                <input type="text" id="destno" name="destno">
            </div>
        </div>
  
  
        <div class="form-group">
            <label class="col-md-1" for="valperiod">valperiod:</label>
            <div class="col-md-2">
                <input type="text" id="valperiod" name="valperiod">
            </div>
            <label class="col-md-1" for="priority">priority:</label>
            <div class="col-md-2">
                <input type="text" id="priority" name="priority">
            </div>
        </div>
  
  
        <div class="form-group">
            <div class="col-sm-offset-1">
                <button type="submit" class="btn">Submit</button>
                <input type="checkbox" name="debug">Debug info
            </div>
        </div>
    </form>
  </body>

＆＃13;

注意：删除row表单form-group此代码

 <div class="form-group row">
                <label class="col-md-1" for="app">app:</label>
                <div class="col-md-2">
                    <input type="text" id="app" name="app">
                </div>
                <label class="col-md-1" for="origin">origin:</label>
                <div class="col-md-2">
                    <input type="text" id="origin" name="origin">
                </div>
 </div>

Answer 2

您的第二个<div class="form-group">标记上有一个row类，删除它并且它将像其他标记一样堆叠。

你还将Bootstrap 3和4加载到该笔上，你应该删除BS4，因为它可能会导致一些问题。

堆叠前，引导标签重叠

2 个答案: