2 回答

TA貢獻1843條經驗 獲得超7個贊
只是因為border-radius,您可以添加border-width: 0;以消除該差距。
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border-width: 0;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">?mne</label>
<input type="input" class="form-control " size="100%" id="input?mne" placeholder="">
</div>
</form>
</div>
</div>

TA貢獻1796條經驗 獲得超7個贊
添加邊框:0;它會以不同的方式顯示空間,有時其他角最好將邊框設置為 0
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border: 0;
}
- 2 回答
- 0 關注
- 144 瀏覽
添加回答
舉報