请,我在这里需要帮助,我正在定型此预订表以使其适合我的布局,并遇到一些我不知道如何解决的奇怪错误。
当我检查“提交”按钮时,有一个右边距,我不知道该如何消除它,原因是什么?我对问题源是确定的,它是一个引导网格,但我尝试了所有我认为可以做的事情,但没有任何效果。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/2dedfa30a2.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="booking">
<div class="service-box">
<button><i class="fas fa-plane-departure"></i>Tours</button>
<button><i class="fas fa-car"></i>Rent a car</button>
</div>
<div class="booking-form">
<form>
<div class="row justify-content-center no-margin">
<div class="col-md-2">
<div class="form-header">
<span>Find Your</span><br>
<b>Destination</b>
</div>
</div>
<div class="col-md-8">
<div class="row no-margin">
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Where to</span>
<input class="form-control" list="browsers" name="myBrowser" placeholder="Ener a country">
<datalist class="form-control" id="browsers">
<option value="Spain">
<option value="France">
<option value="Italy">
<option value="United State">
</datalist>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">From</span>
<input class="form-control" type="date">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">From</span>
<input class="form-control" type="date">
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-btn">
<button class="submit-btn"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
header {
height: 130vh;
background-image: url('../assets/134.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
.nav-bar {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 20px;
}
.contact {
justify-self: start;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
}
.nav-bar i {
padding-right: 10px;
}
.contact a:hover {
color: inherit
}
.tools {
justify-self: end;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
.tools select {
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
font-size: 14px;
}
.tools select option {
background: rgba(226, 240, 251, 0.3);
color: #ccc;
font-size: 14px;
}
.navigation {
display: grid;
grid-template-columns: 1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 10px;
}
.navigation ul li {
display: inline-block;
color: #fff;
}
.navigation ul li:not(:last-child) {
margin-right: 15px
}
.navigation ul li:last-child i {
font-size: 20px;
color: darkgray
}
.navigation ul:last-child {
position: relative;
}
.navigation ul li:last-child::after {
content: '';
width: 40px;
height: 40px;
background-color: rgba(130, 141, 150, 0.3);
position: absolute;
border-radius: 50%;
right: 21px;
bottom: -10px
}
.navigation ul li a:hover {
color: inherit;
}
.text-logo {
font-family: 'Courgette', serif;
font-size: 80px;
-webkit-transform: translateY(200px);
transform: translateY(200px);
margin: auto;
text-align: center;
color: #fff;
text-decoration: underline;
}
#booking {
-webkit-transform: translateY(70%);
transform: translateY(230%);
}
.service-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.service-box button {
text-align: center;
background-color: #fff;
height: 50px;
padding: 10px;
color: #149A99;
-webkit-box-shadow: none;
border: none;
box-shadow: none;
font-size: 16px;
width: 200px
}
.service-box button i {
margin: 10px;
font-size: 18px
}
.service-box button:hover {
background-color: #149A99;
color: #fff;
}
.booking-form {
background: #fff;
}
.booking-form > form .row.no-margin {
margin-right: 0px;
margin-left: 0px;
}
.booking-form > form .row.no-margin > [class*="col-"] {
padding-right: 0px;
padding-left: 0px;
}
.booking-form .form-header {
line-height: 38px;
padding-top: 10px;
text-align: center;
color: #586458;
}
.form-header span {
font-size: 14px;
color: #818390;
font-weight: 600;
}
.booking-form .form-header b {
font-weight: 800;
font-size: 18px;
}
.booking-form .form-group {
position: relative;
height: 110px;
padding: 15px 10px;
margin-bottom: 0px;
}
.booking-form .form-control {
background-color: transparent;
border-radius: 0px;
border: none;
height: 50px;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
font-size: 15px;
color: #3c404a;
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control + .select-arrow {
position: absolute;
right: 0px;
bottom: 20px;
width: 32px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: #818390;
font-size: 12px;
}
.booking-form select.form-control + .select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
color: #818390;
display: block;
font-weight: 400;
height: 30px;
line-height: 30px;
font-size: 14px;
font-weight: 600
}
.booking-form .submit-btn {
background: #149A99;
color: #fff;
border: none;
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
display: block;
height: 100px;
width: 70px;
}
[type="date"] {
background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 95% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
input {
font-family: 'Pro Sans', sans-serif;
border-radius: 5px;
background-color: #fff;
padding: 3px 5px;
}
答案 0 :(得分:3)
存在该空格是因为您将提交按钮放在具有特定宽度的父级中。特别是col-md-2
(如果屏幕为12列宽,则此元素始终为2列宽)。尝试删除该固定的列宽,并将父级设置为与justify-content-end
浮动。
<div class="row justify-content-end no-margin">
...
<div class="">
<div class="form-btn">
<button class="submit-btn"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</div>
</div>
在JSFiddle上运行的完整版本: https://jsfiddle.net/6wk7bm40/