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按钮去除右边距的主要内容,如果未能解决你的问题,请参考以下文章

与边距水平对齐,同时不丢失垂直对齐

Bootstrap - 为啥:行删除左边距而不是行流体

Twitter 的 Bootstrap 3 网格,更改断点和删除填充

Bootstrap Carousel - 动画和边距问题

Bootstrap h6标签边距问题[关闭]

bootstrap去除自带15px内边距,去除container 15px padding