Bootstrap登錄表單文本框重疊

-1

我已經檢查了一些其他的答案，但沒有爲我工作。真的很困惑這一個。Bootstrap登錄表單文本框重疊

正如你可以看到右邊重疊邊界。我對箱的.css：

input[type=text], input[type=password] { 
width: 100%; 
padding: 12px 20px; 
margin: 8px 0; 
display: inline-block; 
border: 1px solid #ccc; 
box-sizing: border-box; 
}

我嘗試使用max-width: 100%;，但它似乎並沒有機會它。

代碼形式：

form { 
 
border: 3px solid #f1f1f1; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
button:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
} 
 

 

 
img.avatar { 
 
    width: 40%; 
 
    border-radius: 50%; 
 
} 
 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .cancelbtn { 
 
    width: 100%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h2>Login To Your Account</h2> 
 
    <form action="/action_page.php"> 
 
    <div class="imgcontainer"> 
 
     <img src="img_avatar2.png" alt="Avatar" class="avatar"> 
 
    </div> 
 
    
 
    <div class="container"> 
 
     <label><b>Username</b></label> 
 
     <input type="text" placeholder="Enter Username" name="uname" required> 
 

 
     <label><b>Password</b></label> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 

 
     <button type="submit">Login</button> 
 
     <input type="checkbox" checked="checked"> Remember me 
 
    </div> 
 

 
    <div class="container" style="background-color:#f1f1f1"> 
 
     <button type="button" class="cancelbtn">Cancel</button> 
 
     <span class="psw">Forgot <a href="#">password?</a></span> 
 
    </div> 
 
    </form> 
 
</div>

來源

2017-09-08 Mark.S

感謝您提供您的'輸入'CSS，但是請您提供框的其餘部分以及相關的HTML（以確認您的選擇器目標）？沒有它就很難回答這個問題。如果你可以更新你的問題，在[** minimal，complete，and verifiable example **]（http://stackoverflow.com/help/mcve）中列出所有**相關代碼**，這將有所幫助。如果您的HTML是在服務器端生成的，請發佈**輸出**。有關詳細信息，請參閱有關[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）的幫助文章:) –

感謝您的好意。剛剛更新 –

此代碼正常工作。文本框不會超出div。在哪個瀏覽器中你有問題..？ –

我會的寬度可能添加到容器中。

.container { 
    width: 100%; 
    padding: 16px; 
}

這可能會解決它。

然後，如果失敗了，你也可以較小的寬度增加了輸入文本框：

input[type=text], input[type=password] { 
width: 75%; 
padding: 12px 20px; 
margin: 8px 0; 
display: inline-block; 
border: 1px solid #ccc; 
box-sizing: border-box; 
}

我不推薦使用!imporatant但你也可以嘗試將其添加到寬度：

input[type=text], input[type=password] { 
width: 75%!important; 
padding: 12px 20px; 
margin: 8px 0; 
display: inline-block; 
border: 1px solid #ccc; 
box-sizing: border-box; 
}

我只是還注意到你的登錄按鈕是重疊的。因此，您還需要將以上width: 75%;添加到輸入提交中。我沒有看到你是否有提交輸入類，但你沒有發佈它

來源

2017-09-08 05:09:22 DreamRJ

Bootstrap登錄表單文本框重疊

回答

相關問題