堆疊之前自舉標籤重疊

我正在用Boostrap 3的form-horizontal構建表格，並使用網格系統col-md-*來保持標籤和輸入對齊。當瀏覽器窗口的寬度爲1200px或更大時，它會正確顯示，但當較少並且媒體查詢啓動時，附加到每個輸入的標籤會與其左側的輸入重疊，而不是保持分開或垂直堆疊。堆疊之前自舉標籤重疊

看到這個筆：https://codepen.io/chrisjbird/pen/XgZmZe

如何阻止他們重疊？

來源

2017-06-29 drkvogel

add'input {max-width：100％; }' – APAD1

@ APAD1這是最簡單的答案，謝謝！ – drkvogel

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

來源

2017-06-29 16:12:07

這樣做 - 我想知道爲什麼Bootstrap中的輸入不是'max-width：100％'？順便說一句，額外的'row'類被遺漏了，謝謝指出它。 'row'被'horizontal-form'隱含，所以刪除它沒有效果 – drkvogel

@drkvogel ... yaa如果你只刪除'row'，那麼也會得到完美的結果。但很好，你給文本框的最大寬度。 –

你的第二個<div class="form-group">標籤上有一個row類，移除了，它會堆積跟人家一樣。

您還將Bootstrap 3和4裝入該筆，您應該刪除BS4，因爲它可能會導致一些問題。

來源

2017-06-29 16:14:58 Gwesolo

堆疊之前自舉標籤重疊

回答

相關問題