Bootstrap按钮去除右边距
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap按钮去除右边距相关的知识,希望对你有一定的参考价值。
[请在这里我需要帮助,我正在对这张预订表进行样式设计,以使其适合我的布局,并遇到一些我不知道如何解决的古怪错误。
[当我检查提交按钮时,有一个右边距,我不知道该如何消除它,原因是什么?我对问题源是确定的,它是一个引导网格,但我尝试了所有我能想到的事情,但没有任何效果。
<!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
将父级设置为向右浮动。
以上是关于Bootstrap按钮去除右边距的主要内容,如果未能解决你的问题,请参考以下文章