如何在引导程序中以自定义宽度在页面上的 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>

Answer 2

Bootstrap 连续 12 列。你现在拥有的是col-lg-2 2 4 4 2，加起来是14。所以如果你想把它们全部排成一行，你必须将你的总col size调整到12以下。

在响应式设计方面，您可能还想创建 col- ，甚至是 col-sm、col-md 以便在较小的屏幕尺寸下很好地布局。