html - 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 将父级设置为向右浮动。

<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/

关于html - Bootstrap 导致未知边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59022776/

html - Bootstrap 导致未知边距

上一篇：javascript - 打开时 Bootstrap 选项卡不显示事件

下一篇：css - 是否可以更改整个组件的大小及其内部的所有 Controller (如调整窗口大小)