html - 引导程序导致未知边距
问题描述
拜托,我在这里需要帮助,我正在设计这个预订表格以使其适合我的布局,并面临一些我不知道如何修复的古怪错误。
当我检查提交按钮时,有一个右边距,我不知道如何摆脱它,是什么原因造成的?我有点确定问题来源是引导网格,但我尝试了我能想到的一切都没有效果。
<!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;
}
解决方案
空间在那里,因为您将提交按钮放在具有特定宽度的父级中。具体来说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/
推荐阅读
- javascript - ajax成功并加载特定div后,内容消失了
- wso2 - 如何在构建源代码之前从 WSO2-IS 中查找/更改 login.jsp 和仪表板 ui
- c# - 转换 IQueryable
到 IQueryable - python - 我的动画图表不允许我使用 blitting 技术
- python - 插入编号 使用 Scrapy 刮掉的物品
- wireshark - 单播 mDNS 响应示例
- java - preparedStatement.setString(1,"null"), is being interpreted as null instead of a string (after preparedStatement.addBatch())
- mysql - 在 RLIKE mysql 正则表达式中搜索两个或没有字符
- django - 如何将日期从函数记录到日期字段
- dialogflow-es - DialogFlow 中的帐户链接仅发生一次