jquery - Bootstrap 4 带有表单的网格布局

Question

我正在制作简单的表单和控件，并与全宽度控件并排，但它不起作用，如果我放置 col-sm-xx ，它会中断并转移到另一行。那么我怎样才能使它们在一行中具有完整的列宽

<div class="container-fluid">
    <div class="row align-items-center">
                <div class="col">
                    <div class="dropdown" id="dpLocation">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Location
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item">Sharq</a>
                            <a class="dropdown-item">Shuwaikh</a>
                            <a class="dropdown-item">Hawally</a>
                            <a class="dropdown-item">Farwaniya</a>
                            <a class="dropdown-item">Hawally</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
                </div>
                <div class="col">
                    <a>
                        <i class="fa fa-arrow-circle-right" style="font-size:24px;color:#fff"></i>
                    </a>
                </div>
        </div>
</div>

Answer 1

您应该使用 col-auto 最小化下拉按钮和图标的宽度，然后使用 col 使输入填充宽度...

https://www.codeply.com/go/hJcCGGUnpC

<div class="container-fluid">
    <div class="row no-gutters align-items-center">
        <div class="col-auto">
            <div class="dropdown" id="dpLocation">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Location
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">Sharq</a>
                    <a class="dropdown-item">Shuwaikh</a>
                    <a class="dropdown-item">Hawally</a>
                    <a class="dropdown-item">Farwaniya</a>
                    <a class="dropdown-item">Hawally</a>
                </div>
            </div>
        </div>
        <div class="col">
            <input type="text" placeholder="Mobile" class="form-control" id="txMobile" minlength="8" maxlength="8" pattern="\d*">
        </div>
        <div class="col-auto">
            <a>
                <i class="fa fa-arrow-circle-right" style="font-size:24px;"></i>
            </a>
        </div>
    </div>
</div>