水平表單輸入重疊

我無法正確顯示錶單。以下兩行是水平顯示的，但它們在名稱結束和電子郵件開始處相互重疊。目前沒有實現CSS，我試過padding-left,margin-left和其他一些技巧，但不能讓它們分開。有任何想法嗎？水平表單輸入重疊

Issue

<div id="contact" class="col-xs-6 col-md-6 col-lg-6"> 
<div class="center hero-unit"> 
    <form action="success.html" method="GET"> 
      <h4> Contact Me </h4> 
      <div class="form-group"> 
      <div class="col-sm-4 col-md-4 col-lg-4"> 
       <input type="text" placeholder="Name" size="20" id="inline"> 
      </div> 
      <div class="col-sm-4 col-md-4 col-lg-4"> 
       <input type="text" placeholder="Email Address" size="35" id="inline"> 
      </div> 
      </div> 
    </form> 
</div> 
</div>

包括以防萬一CSS爲hero-unit這是造成問題

.hero-unit { 
    text-align: center; 
    background-color: #9C9C9C; 
    font-size: 11px; 
    margin: 30px; 
    padding: 30px; 
    line-height: 1.4em; 
    border-color: #C1C1C1; 
    color: white; 
}

來源

2014-10-29 Virge Assault

'class =「col-xs-6 col-md-6 col-lg-6」'可以簡化爲'類= 「COL-XS-6」'。 'class =「col-sm-4 col-md-4 col-lg-4」'可以簡化爲'class =「col-sm-4」'。請參閱https://github.com/twbs/bootlint/wiki/E029 – cvrebert 2014-10-29 23:20:18

您是否嘗試過'form-inline'類？ – cvrebert 2014-10-29 23:21:34

只需添加到樣式：

.hero-input { 
    padding:5px; 
    margin: 10px; 
    display:inline-block; 
}

，並輸入：

class="hero-input"

使邊距和填充對每個輸入生效。顯然，您可以根據自己的填充和邊距來修改它。基本上，邊際應該在輸入或輸入的div中。你也應該避免使用重複的ID。 id="inline"應該是class="inline"，如果你使用額外的英雄輸入類，那麼它可能是class="inline hero-input"

來源

2014-10-29 23:17:18 MiltoxBeyond

水平表單輸入重疊

回答

相關問題