html - 如何在 Bootstrap 中以自定义宽度在页面上的 1 行中显示 5 个输入

Question

我想在自定义宽度的页面上的 1 行中有 5 个输入，例如:数量输入应该更小，报价输入应该更大我正在尝试，但我不明白如何做到这一点。我尝试添加 5 列，然后将 col-lg-2 类添加到我想要的小输入和 col-lg-4 到我想要更大的输入，它看起来不错，但提交按钮未显示在同一行中。有任何想法吗？如何做到这一点？

这是我使用的代码

  <div class="container-fluid">
      <div class="row">
          <div class="col-lg-2">
            <div class="form-group">
              <input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
            </div>
          </div>
          <div class="col-lg-2">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <option value="AED">AED</option>
                <option value="AFN">AFN</option>
                <option value="ALL">ALL</option>
                <option value="AMD">AMD</option>
                <option value="ANG">ANG</option>
                <option value="AOA">AOA</option>
                <option value="ARS">ARS</option>
                <option value="AUD">AUD</option>
                <option value="AWG">AWG</option>
                <option value="AZN">AZN</option>
                <option value="BAM">BAM</option>
              </select>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AS">American Samoa</option>
                <option value="AD">Andorra</option>
                <option value="AO">Angola</option>
                <option value="AI">Anguilla</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua and Barbuda</option>
              </select>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="form-group">
              <select class="search-form-currency form-control"> 
                <optgroup label="All payment methods">
                  <option value="ALL_ONLINE">All online offers</option>
                  <option value="NATIONAL_BANK">National bank transfer</option>
                  <option value="SEPA">SEPA (EU) bank transfer</option>
                  <option value="SPECIFIC_BANK">Transfers with specific bank</option>
                  <option value="INTERNATIONAL_WIRE_SWIFT">International Wire (SWIFT)</option>
                  <option value="OTHER">Other online payment</option>
                  <option value="CASH_DEPOSIT">Cash deposit</option>
                  <option value="ECOCASH">EcoCash</option>
                </optgroup>  
              </select>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="form-group">
              <input type="submit" name="find-offers" value="Search" class="btn btn-primary">
            </div>
          </div>                                                            
      </div>
  </div>

我得到的结果:

我要实现的目标:

Answer 1

我会做 3 件事来改善间距/大小...

1. 使用 no-gutters 移除行的间距
2. 将 flex-lg-nowrap 添加到该行以防止在 lg(和更宽)上换行
3. 在最右边的 2 列上使用自动布局网格大小

Codeply demo

<div class="container-fluid">
    <div class="row no-gutters flex-lg-nowrap">
        <div class="col-lg-2">
            <div class="form-group">
                <input class="search-form-amount form-control" name="amount" placeholder="Amount" type="text">
            </div>
        </div>
        <div class="col-lg-2 pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ...
                </select>
            </div>
        </div>
        <div class="col-lg-4 pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ...
                </select>
            </div>
        </div>
        <div class="col-lg pl-lg-1">
            <div class="form-group">
                <select class="search-form-currency form-control">
                    ..
                </select>
            </div>
        </div>
        <div class="col-lg-auto pl-lg-1">
            <div class="form-group">
                <input type="submit" name="find-offers" value="Search" class="btn btn-primary">
            </div>
        </div>
    </div>
</div>