2017-06-29 112 views
0

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

看到这个笔:https://codepen.io/chrisjbird/pen/XgZmZe

如何阻止他们重叠?

+1

add'input {max-width:100%; }' – APAD1

+0

@ APAD1这是最简单的答案,谢谢! – drkvogel

回答

1

TextBox是一种迭这样你就可以增加textbox宽度,并给予margin:12px

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

input{ 
 
margin:12px; 
 
max-width:100%; 
 
}
<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>

注: REMOVE 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> 
+0

这样做 - 我想知道为什么Bootstrap中的输入不是'max-width:100%'?顺便说一句,额外的'row'类被遗漏了,谢谢指出它。 'row'被'horizo​​ntal-form'隐含,所以删除它没有效果 – drkvogel

+0

@drkvogel ... yaa如果你只删除'row',那么也会得到完美的结果。但很好,你给文本框的最大宽度。 –

0

你的第二个<div class="form-group">标签上有一个row类,移除了,它会堆积跟人家一样。

您还将Bootstrap 3和4装入该笔,您应该删除BS4,因为它可能会导致一些问题。