Html 如何在bootstrap中以自定义宽度在一页的一行中显示5个输入

我想有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>

AED
AFN
全部的
AMD
昂
AOA
人工鱼
澳元
AWG
AZN
砰
博内尔、圣尤斯特修斯和萨巴
阿尔巴尼亚
阿尔及利亚
美属萨摩亚
安道尔
安哥拉
安圭拉
南极洲
安提瓜和巴布达
所有在线优惠
国民银行转账
SEPA（欧盟）银行转账
向特定银行转账
国际电报（SWIFT）
其他网上付款
现金存款
生态现金

我得到的结果是：

我正在努力实现的目标：

---

引导程序一行有12列。您现在拥有的是

col-lg-2 2

，总计14。因此，如果您想将所有列都排成一行，则必须将总列大小调整到12以下

---

就响应性设计而言，您可能还希望创建

col-

，甚至

col sm

，

col md

，这样它就可以在更小的屏幕大小上很好地布局。

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

使用

无排水沟从行中删除排水沟

将

flex lg nowrap

添加到行中，以防止在

lg

上缠绕（以及更宽）

在最右边的2列上使用自动布局网格大小调整

...
...
..

你说的低于12。假设我将col-lg-4改为2，它会解决问题，但输入的大小会更小，这不是我想要的。@UmerLachi，不要引入太多可能导致此简单布局出现错误行为的技巧。您可以做的一件事是添加

无排水沟

，以减少

列

之间的间距。然后按比例调整col，使其接近所需的布局。根据您的图片，您可能需要为

lg

屏幕试用

3:1:3:4:1

。请记住，

col

将根据窗口大小调整其宽度。有时候，你不能期望所有宽度的布局都是完美的。例如，每个列都有自己的内容（文本、按钮等），在某些情况下，最小按钮大小可能会大于该列。在本文的标记中引用了引导3和4。您使用的是哪个版本？它实际上与解决方案有关。

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